时间戳

首页 > 解决方案 > 为什么内部tbody不伸展？

html - 为什么内部tbody不伸展？

问题描述

我的桌子有问题。这是我的代码：

<table class="employers__table">
     <thead>
          <tr>
             <td>Таб. №&lt;/td>
             <td>Сотрудник / СИЗ</td>
             <td>Разм. ряд</td>
             <td>Кол.</td>
             <td>Ед. изм.</td>
             <td>Дата выдачи</td>
             <td>Дата замены</td>
             <td>Списать СИЗ</td>
             <td>Продлить СИЗ</td>
         </tr>
  </thead>
  <tbody>
        <tbody class="label">
            <tr>
               <td colspan="9">
                   Aaa
               </td>
           </tr>
       </tbody>
 </tbody>
</table>

.employers__table {
    overflow-y: scroll;
}
.label tr > td {
    background-color: #000;
    color: #fff;
}

内部<tbody>不拉伸。这就是它的样子。

为什么会这样？

我试图在新项目中创建一个具有相同结构的表，它在那里工作......我不明白。

标签： htmlcss

解决方案

您基本上违反了HTML TABLE的基本语义。

它允许您<tbody>在 a中有多个table，但不能嵌套tbody

<TABLE>
<THEAD>
     <TR> ...header information...
</THEAD>
<TFOOT>
     <TR> ...footer information...
</TFOOT>
<TBODY>
     <TR> ...first row of block one data...
     <TR> ...second row of block one data...
</TBODY>
<TBODY>
     <TR> ...first row of block two data...
     <TR> ...second row of block two data...
     <TR> ...third row of block two data...
</TBODY>
</TABLE>

更正的片段

.employers__table {
  overflow-y: scroll;
}

.label tr>td {
  background-color: #000;
  color: #fff;
}
<table class="employers__table">
  <thead>
    <tr>
      <td>Таб. №&lt;/td>
      <td>Сотрудник / СИЗ</td>
      <td>Разм. ряд</td>
      <td>Кол.</td>
      <td>Ед. изм.</td>
      <td>Дата выдачи</td>
      <td>Дата замены</td>
      <td>Списать СИЗ</td>
      <td>Продлить СИЗ</td>
    </tr>
  </thead>
  <tbody class="label">
    <tr>
      <td colspan="9">
        Aaa
      </td>
    </tr>
  </tbody>
</table>

推荐阅读