Question

一段时间以来，我一直在尝试修复此表，但在使列正确对齐方面遇到很多麻烦。我已附上以下图片，您可以明白我的意思。有人可以指出我在这里想念的东西吗？

 <table class="table table-bordered table-hover">
   <thead>
      <tr>
         <th colspan="4" class="border-bottom-0 pt-0 pb-0"></th>
         <th colspan="7" class="border-bottom-0 pt-0 pb-0"><small>Schedule</small> </th>
      </tr>
      <tr>
         <th class="border-left border-top-0 border-right-0 pt-0">#</th>
         <th class="border-left-0 border-top-0 border-right-0 pt-0">Last name</th>
         <th class="border-left-0 border-top-0 border-right-0 pt-0">First name</th>
         <th class="border-left-0 border-top-0 border-right pt-0">Room</th>
         <th class="border-left border-top-0 border-right-0 pt-0">Mon</th>
         <th class="border-left-0 border-top-0 border-right-0 pt-0">Tue</th>
         <th class="border-left-0 border-top-0 border-right-0 pt-0">Wed</th>
         <th class="border-left-0 border-top-0 border-right-0 pt-0">Thu</th>
         <th class="border-left-0 border-top-0 border-right-0 pt-0">Fri</th>
         <th class="border-left-0 border-top-0 border-right-0 pt-0">Sat</th>
         <th class="border-left-0 border-top-0 border-right pt-0">Sun</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th class="border-left aling-double-row">1</th>
         <td>Brown</td>
         <td>Angela</td>
         <td class="p-0" colspan="8">
            <table style="width: 100%;">
               <tbody>
                  <tr>
                     <td class="border-0">Koala</td>
                     <td><input type="checkbox" name="monday"></td>
                     <td><input type="checkbox" name="tuesday"></td>
                     <td><input type="checkbox" name="wednesday"></td>
                     <td><input type="checkbox" name="thursday"></td>
                     <td><input type="checkbox" name="friday"></td>
                     <td><input type="checkbox" name="saturday"></td>
                     <td><input type="checkbox" name="sunday"></td>
                  </tr>
               </tbody>
            </table>
            <table style="width: 100%;">
               <tbody>
                  <tr>
                     <td class="border-0">Possum</td>
                     <td><input type="checkbox" name="monday"></td>
                     <td><input type="checkbox" name="tuesday"></td>
                     <td><input type="checkbox" name="wednesday"></td>
                     <td><input type="checkbox" name="thursday"></td>
                     <td><input type="checkbox" name="friday"></td>
                     <td><input type="checkbox" name="saturday"></td>
                     <td><input type="checkbox" name="sunday"></td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

Answer 1

嵌套表不是此视图的最佳选择。前三列使用rowspan。代码将如下所示。

<tr>
    <th class="border-left aling-double-row" rowspan=2>1</th>
    <td rowspan=2>Brown</td>
    <td rowspan=2>Angela</td>
    <td class="border-0">Koala</td>
    <td><input type="checkbox" name="monday"></td>
    <td><input type="checkbox" name="tuesday"></td>
    <td><input type="checkbox" name="wednesday"></td>
    <td><input type="checkbox" name="thursday"></td>
    <td><input type="checkbox" name="friday"></td>
    <td><input type="checkbox" name="saturday"></td>
    <td><input type="checkbox" name="sunday"></td>
</tr>
<tr>
    <td class="border-0">Possum</td>
    <td><input type="checkbox" name="monday"></td>
    <td><input type="checkbox" name="tuesday"></td>
    <td><input type="checkbox" name="wednesday"></td>
    <td><input type="checkbox" name="thursday"></td>
    <td><input type="checkbox" name="friday"></td>
    <td><input type="checkbox" name="saturday"></td>
    <td><input type="checkbox" name="sunday"></td>
</tr>

请注意，前3列的值为rowspan2。它将占用2行。在下一行中，您无需创建前3列。

无法让表格在我的表格中对齐

1 个答案: