Пустой t: dataTable может отображать недопустимый HTML?

Я использую Tomahawk 1.1.8 и пытаюсь построить/рендерить таблицу данных, даже если она пуста. (отображается = "true" как требование)

Учитывая, что наш Bean предоставляет пустой список (нет строк, отображаемых t:dataTable). Почему t:dataTable от Tomahawks просто отображает следующий «недопустимый» HTML, даже если у нас есть заголовок, содержащий более одного столбца:

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

Код JSF для t:dataTable как обычно:

<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;" активен.

Я подготовил два примера HTML. Один описывает фактический факт, а другой - возможное решение, как Tomahawk может это исправить:

<!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 возражает, и я тоже могу принять это во внимание.

Есть ли обходные пути или шаблоны, как получить от этого наилучший результат? — спрашиваю я, потому что, возможно, мне не хватает какой-то техники.

Спасибо


datatable jsf tomahawk
person owl-eye    schedule 09.06.2010    source источник
comment
вы зарегистрировали ошибку для этого?   -  person Jonathan S. Fisher    schedule 28.03.2013

Ответы (1)


arrow_upward
3
arrow_downward

Я знаю, что это старый вопрос, но я столкнулся с похожей проблемой, и подход, который я использовал для ее решения, заключался в проверке существования данных с помощью empty следующим образом.

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

Затем класс CSS «скрытый» применяется к телу таблицы, поэтому у вас остаются только заголовки столбцов таблицы, и проблема с отображением исчезает. Ваш CSS должен выглядеть так:

.hidden {
    display: none;
}

Надеюсь, это поможет любому, кто столкнется с этим в будущем. Этот вопрос о переполнении стека также может быть вам полезен, как и ссылка на http://myfaces.apache.org/tomahawk-project/tomahawk/tagdoc/t_dataTable.html, если вы хотите сделать что-то еще, кроме применения класса к основному уровню вашей таблицы.

person user1018494    schedule 28.10.2011