Question

在这里感觉有点傻瓜。我希望第一个<td>跨越（大约）70-80％的表格，第二个和第三个<td>分割它们之间的剩余空间。

我认为将<th> colspan设置为6，然后将第一个<td>设为colspan为4将允许我设置完成此操作，但似乎占据桌子的一半，然后最后2 <td>是不同的宽度。知道如何解决这个问题吗？

HTML

<table class="table table-record no-margin-bottom">                 
    <thead>
     <tr>
      <th colspan="6" class="table-tab-active--grey font-weight-bold text-md-center">Tasks</th>
     </tr>                                      
    </thead>
    <tbody>
     <tr class="bg--lighter-grey txt--darker-blue" ">
      <td colspan="4">Lorem Ipsum</td>
      <td colspan="1" class="text-uppercase font-weight-bold">Lorem</td>
      <td colspan="1" class="font-weight-bold text-uppercase no-padding"><button class="btn btn--orange btn-block">Lorem Ipsum</button></td>
     </tr>
     <tr class="bg--lighter-grey txt--darker-blue" ">
      <td colspan="4">Lorem Ipsum</td>
      <td colspan="1" class="text-uppercase font-weight-bold">Lorem</td>
      <td colspan="1" class="font-weight-bold text-uppercase no-padding"><button class="btn btn--lighter-grey btn-block">Button</button></td>
     </tr>                          
    </tbody>
</table>

Answer 1

在表格上设置％宽度，然后将每个td设置为具有指定的宽度。你可以使用像

这样的东西

.table td:nth-child(0) {width: 70% } 
.table td:nth-child(1) { width:15% }

或者，在<td>标记中明确设置％width。

Answer 2

这不是colspans的用途您不能使用colspan来增加列的宽度;他们打算告诉桌子一个单元格应该占用多列。

因此，如果表中有6列，那么使用4的colspan将导致单元格占用4列;如果每列的宽度相同，那么该单元格的宽度是其他单元格的4倍，是的。

＆＃13;

table {border:1px outset #777; table-layout:fixed}
td {border:1px inset #777; width:16.66%}

＆＃13;

<table>
 <tr>
  <td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>six</td>
 </tr>
 <tr>
  <td colspan="4">one to four</td><td>five</td><td>six</td>
 </tr>
</table>

＆＃13;

但为了使其工作，列必须已经有宽度所以，你不会逃避设置宽度。如果你必须这样做，在你的情况下，也没有必要使用colspan。只有宽度。

＆＃13;

table {border:1px outset #777; table-layout:fixed}
td {border:1px inset #777; width:16.66%}
td:first-child {width:66.66%}

＆＃13;

<table>
 <tr>
  <td>one</td><td>two</td><td>three</td>
 </tr>
</table>

＆＃13;

您可能需要学习table-layout属性;它会在您设置时保持单元格的宽度。没有它，表格有时可能会忽略指定的宽度以显示所有内容。

HTML表，不是所谓的colspan

2 个答案: