2

Tomahawk 1.1.8を使用していて、空であってもdataTableをビルド/レンダリングしようとしています。（要件としてrendered = "true"）

Beanが空のリストを提供することを考えると（t：dataTableによって表示される行はありません）。複数の列を提供するヘッダーがある場合でも、Tomahawksのt：dataTableが「無効な」HTMLの後にレンダリングされるのはなぜですか。

<tbody><tr><td></td></tr></tbody>

t：dataTableのJSFコードは通常どおりです。

<t:dataTable value="#{bean.list}" var="dataItem">
  <h:column>
    <f:facet name="header">
      <h:outputText value="A"/>
    </f:facet>
    <h:outputText value="#{dataItem.a}" />
  </h:column>
  <h:column>
    <f:facet name="header">
      <h:outputText value="B"/>
    </f:facet>
    <h:outputText value="#{dataItem.b}" />
  </h:column>
  <h:column>
    <f:facet name="header">
      <h:outputText value="C"/>
    </f:facet>
    <h:outputText value="#{dataItem.c}" />
  </h:column>
</t:dataTable>

対照的に、JSF h：dataTableは、完全なtrタグを省略するだけで「より良い」レンダリングを行います（=これも「無効な」HTMLであるかどうかわからない場合でも）。

<tbody></tbody>

これに関する私の問題は、css "border-collapse：collapse;"のときにテーブルトップの内側の境界線/ルールがないことです。アクティブです。

2つのHTML例を用意しました。1つは実際の事実を説明し、もう1つはトマホークがそれを修正する方法を説明しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>less td than th in one row</title>

<style type="text/css" media="screen">
table {
    border-collapse: collapse;
}

th, td {
    border:1px solid #716F70;
}
</style>
</head>
<body>
less td than th in one row: borders in FF3.x e.g. are rendered just for two table body cells:
<br />
<table border="1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>

  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
    <td>cell4</td>
    <td>cell5</td>

    <td>cell6</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td/>
  </tr>
</table>
</body>
</html>

... colspanを使用すると、どのように改善されるでしょうか。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>less td than th in one row: border with colspan ok</title>

<style type="text/css" media="screen">
table {
    border-collapse: collapse;
}

th, td {
    border:1px solid #716F70;
}
</style>
</head>
<body>
less td than th in one row: border (top) rendered for complete row, because of &lt;td colspan="5"/&gt; in cell 2 of row 2:
<br />
<table border="1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>
  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td colspan="5"/>
  </tr>
</table>
</body>
</html>

行のすべてのセルにわたるcolspanが最適かもしれないと私は思います。

IEやOperaのような一部のブラウザは気にしませんが、Firefoxは気にしますし、私もこの点を理解できます。

これから最良の結果を得る方法の回避策やパターンはありますか？テクニックが足りないかもしれないので、お願いします。

ありがとう

4

1 に答える 1

3

これは古い質問であることは知っていますが、同様の問題に遭遇しました。これを解決するために使用したアプローチはempty、次の方法でデータが存在するかどうかを確認することでした。

bodyStyleClass = "#{empty bean.list ? 'hidden' : ''}"

次に、CSS クラス「hidden」がテーブルの本体に適用されるため、テーブルの列ヘッダーだけが残り、表示の問題は解消されます。CSS は次のようになります。

.hidden {
    display: none;
}

これが、将来これに遭遇した人に役立つことを願っています。このスタック オーバーフローの質問は、 http://myfaces.apache.org/tomahawk-project/tomahawk/tagdoc/t_dataTable.htmlのリファレンスと同様に、あなたにも役立つかもしれ ません。クラスをテーブルの本体レベルに追加します。

于 2011-10-28T14:21:02.087 に答える