代码之家 › 专栏 › 技术社区 › bp123

在我的表中列队时遇到问题

html

bp123 · 技术社区 · 8 年前

我试着修这张桌子已经有一段时间了,我很难让我的列正确排列。我附上下面的图片,让你明白我的意思。有人能指出我在这里找不到什么吗?

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

1 回复 | 直到 8 年前

david 8 年前

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

<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列具有 行扫描 值2。需要两排。在下一行中,不需要创建前3列。