HTML 表格，不需要 colspan答案

【问题标题】：HTML tables, not desired colspanHTML 表格，不需要 colspan
【发布时间】：2016-10-27 14:02:19
【问题描述】：

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

我认为将<th> colspan 设置为 6，然后将第一个 <td> 设置为 4 的 colspan 将允许我设置完成此操作，但它似乎占据了桌子的一半，然后最后 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>

【问题讨论】：

标签： html html-table

【解决方案1】：

在表格上设置一个 % 宽度，然后将每个 td 设置为具有指定宽度。您可以使用类似

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

或者，在<td> 标记中显式设置% 宽度。

【讨论】：

使用colspan是不是不能实现？
哦...我敢肯定。我想你想要一个 % 因为那是你指定的。就个人而言，我从不使用 colspan，因为我没有看到任何好处，而且它只是更多的代码。这是 colspan 东西的一个非常好的概要，虽然我仍然认为与使用百分比相比它很笨重。但我不是 HTML 专家。 stackoverflow.com/questions/9830506/…

【解决方案2】：

这不是 colspan 的用途。
您不能使用 colspan 来增加列的宽度；它们的目的是告诉表格一个单元格应该占据多列。

所以如果一个表格有 6 列，那么使用 4 的 colspan 将导致一个单元格占用 4 列；如果每一列的宽度相同，那么该单元格的宽度将是其他单元格的 4 倍，是的。

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

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

但为了使其正常工作，列必须已经具有宽度。
所以，你不会逃避设置宽度。而且，如果您无论如何都必须这样做，那么就您而言，也不需要使用 colspan 。只有宽度。

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

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

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

【讨论】：