划分表格行答案

【问题标题】：Dividing table rows划分表格行
【发布时间】：2015-11-02 16:08:41
【问题描述】：

我有一个非常基本的问题。但我无法正常工作。

这是我的表结构。

<table style="width:100%;">
   <tr style="background-color:#000;">
      <td style="color:#fff;">
        Fruits
      </td>
   </tr>
   <tr>
      <td>
        Lychee
      </td>
      <td>
        Mango
      </td>
      <td>
        Papaya
      </td>
      <td>
        Banana
      </td>
   </tr>
</table>

我怎样才能让他的输出成为

【问题讨论】：

标签： html css

【解决方案1】：

使用the colspan attribute。 Colspan 允许一个td 跨越许多列。

<table style="width:100%;">
   <tr style="background-color:#000;">
      <td style="color:#fff;" colspan="4">
        Fruits
      </td>
   </tr>
   <tr>
      <td>
        Lychee
      </td>
      <td>
        Mango
      </td>
      <td>
        Papaya
      </td>
      <td>
        Banana
      </td>
   </tr>
</table>

【讨论】：

当你完成创建 tds 后，返回并计算它们，然后设置 colspan。可悲的是，实际上并没有一种非 hacky 的方式来实现“colspan=all”（将 colspan 设置为一个非常大的数字，或者执行colspan="100%" 可能会起作用，但它们不是标准化的，所以预计一些浏览器会感到困惑)。 More info in this question
上一条评论是为了回应提问者关于动态设置 colspan 的评论，如果下一行中的 td 数量不确定。即使没有 OP 的评论，我也会保留它，因为它仍然是有用的信息。

【解决方案2】：

使用<td style="color:#fff;" colspan="4">

见小提琴https://jsfiddle.net/DIRTY_SMITH/3oo2jmko/1/

<table style="width:100%;">
   <tr style="background-color:#000;">
      <td style="color:#fff;" colspan="4">
        Fruits
      </td>
   </tr>
   <tr>
      <td>
        Lychee
      </td>
      <td>
        Mango
      </td>
      <td>
        Papaya
      </td>
      <td>
        Banana
      </td>
   </tr>
</table>

【讨论】：