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

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

Учитывая, что наш Бин предоставляет пустой список (никакие строки не будут отображаться t:dataTable). Почему Tomahawks' t:dataTable просто отображает следующий "недопустимый" 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. Один описывает фактический факт, а другой - возможное решение, как Томагавк мог бы это исправить:

<!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>

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

Некоторые браузеры, такие как IE или Opera, не возражают, однако Firefox делает, и я тоже могу принять это.

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

Спасибо

Источник

1 ответ

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

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

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

.hidden {
    display: none;
}

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

Источник
Другие вопросы по тегам