<div> в <tr>: это правильно? - PullRequest
Новая
       54

<div> в <tr>: это правильно?

14 голосов
/ 13 августа 2011

Этот код правильный? 

<table>
    <tr>
        <td>...</td>
    </tr>

    <tr>
        <div>...</div>
    </tr>

    <tr>
        <td>...</td>
    </tr>    
</table>

не знаю для семантики (и правил W3C). О чем вы можете сказать?

Ответы [ 6 ]

23 голосов
/ 13 августа 2011

Нет, это недействительно.Элементы tr могут содержать только элементы th и td.Из спецификации HTML4 : 

<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ATTLIST TR                           -- table row --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
>
13 голосов
/ 13 августа 2011

Это не только недействительно, но и не работает! Эта наценка 

<table>
    <tr>
        <td>The First Row</td>
    </tr>

    <tr>
        <div>The Second Row</div>
    </tr>

    <tr>
        <td>The Third Row</td>
    </tr>    
</table>

Производит это отображается 

The Second Row
The First Row
The Third Row

Div извлекается полностью из таблицы и помещается перед ним в DOM

см. http://jsfiddle.net/ELzs3/1/

5 голосов
/ 13 августа 2011

Нет, вам не следует использовать div внутри таблицы, потому что это элемент уровня блока.Вы можете переопределить поведение с помощью CSS, но оно не будет подтверждено с помощью W3C, если это ваша цель.

4 голосов
/ 13 августа 2011

Нет, вы не должны использовать <div> внутри <tr>.Вы можете использовать его внутри <td>, где таблица является правильно вложенной таблицей, хотя это может быть не лучшим решением.Вы можете переопределить настройку отображения div или любого элемента.На самом деле вы могли бы сделать отображение <div> (которое по умолчанию блокируется) в виде ячейки таблицы и наоборот.

2 голосов
/ 13 августа 2011

Это будет работать в режиме причуд, но браузер, совместимый со стандартным режимом, работать не будет, зависит от вашего типа документа. Режим предотвращения причуд является одним из ключей к успешному созданию кросс-браузерно-совместимого веб-контента

Некоторые современные браузеры имеют два режима рендеринга. Причудливый режим отображает HTML-документ, как это делали старые браузеры, например. Netscape 4, Internet Explorer 4 и 5. Стандартный режим отображает страницу в соответствии с рекомендациями W3C. В зависимости от объявления типа документа, присутствующего в документе HTML, браузер переключится либо в необычный режим, либо в стандартный режим. Если декларация типа документа отсутствует, браузер переключится в необычный режим.

http://www.w3.org/TR/REC-html32#dtd

JavaScript не должен вести себя иначе; однако объекты DOM, с которыми работает JavaScript, могут иметь различное поведение.

1 голос
/ 12 марта 2017

Допустим, у вашей строки таблицы в целом 5 столбцов, и вы хотите, чтобы ваш div занимал всю ширину таблицы.Следующее должно сделать трюк. 

<tr>
  <td colspan=5>
    <div class="some-class">
      <p>Hey</p>
    </div>
  </td>
</tr>
...