Question

为什么第一行中的单元格未对齐？ JSfiddle link

这是代码：

＆＃13;

 .box3 {
   margin: auto;
   width: auto;
   height: 300px;
 }
 .tb2 {
   border-collapse: collapse;
   color: black;
   text-align: center;
   margin-top: 10px;
   margin-left: 10px;
   width: 950px;
   height: 300px;
   display: inline-block;
   overflow: auto;
 }
 .tb2 > tbody > tr > th {
   border: 1px solid black;
   background-color: black;
   color: white;
   font-weight: bold;
 }
 .tbd {
   width: auto;
   height: 330px;
   background-color: white;
   color: black;
   overflow: auto;
   display: block;
 }
 .tbd > tr > td {
   border: 1px solid black;
   width: 5%;
   height: 100%;
 }

＆＃13;

<div class="box3">
  <table class="tb2">
    <tr>
      <th></th>
      <th>Day</th>
      <th>Theory Class</th>
      <th>Practical Class</th>
      <th>English Class</th>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Decription</th>
      <th>Checked</th>
      <th></th>
      <th></th>
      <tr>
        <tbody class="tbd">
          <tr>
            <td>1</td>
            <td>Mon</td>
            <td>XXXXXXXXXXXX</td>
            <td>XXXXXXX</td>
            <td>XXXXXXX</td>
            <td>hh:mm</td>
            <td>hh:mm</td>
            <td>XXXXXXXXXXXX</td>
            <td>Yes</td>
            <td>Update</td>
            <td>Delete</td>
          </tr>
        </tbody>
  </table>
</div>
</div>

＆＃13;

第一行的列如何与底部列重合？抱歉我的英语不好。

Answer 1

因为你使用

.tb2 { display: inline-block; }
.tbd { display: block; }

这将删除表格显示。相反，使用

.tb2 { display: inline-table; }
.tbd { display: table-row-group; } /* default value */

＆＃13;

.box3 {
  margin: auto;
  width: auto;
  height: 300px;
}
.tb2 {
  border-collapse: collapse;
  color: black;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  width: 950px;
  height: 300px;
  display: inline-table;
  overflow: auto;
}
.tb2 > tbody > tr > th {
  border: 1px solid black;
  background-color: black;
  color: white;
  font-weight: bold;
}
.tbd {
  width: auto;
  height: 330px;
  background-color: white;
  color: black;
  overflow: auto;
  display: table-row-group;
}
.tbd > tr > td {
  border: 1px solid black;
  width: 5%;
  height: 100%;
}

＆＃13;

<div class="box3">
  <table class="tb2">
    <tr>
      <th></th>
      <th>Day</th>
      <th>Working Class</th>
      <th>Start Class</th>
      <th>End Class</th>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Note</th>
      <th>Checked</th>
      <th></th>
      <th></th>
    </tr>
    <tbody class="tbd">
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

为什么第一行未对齐？

1 个答案: