与 table 中的列相比，TH 的数量不同

Question

即使下面的 table 有 5 列，我怎么能只有一个 th 适合 table 的整个宽度？

我正在尝试用全宽背景颜色填充 th。但是 table 的其余部分有 5 列，因此单数 th 适合第一列。

<tr class="table-title">
    <th>LED</th>
</tr>
<tr class="top">
    <td>Product</td>
    <td>Product Description</td>
    <td>Panel Size</td>
    <td>Weekly Price Per Panel</td>
    <td>Weekly Price Per Square Metre</td>
</tr>

JSFiddle：https://jsfiddle.net/vnvn0qbz/

Answer 1

您可以使用 colspan，像这样：

<tr class="table-title">
    <th colspan="5">LED (this should be full width of the table)</th>
</tr>

这允许您定义元素应该跨越多少列，您只需要使其与您的列数相匹配，在本例中：5

Here is a working example

为了将来参考，还有一个 rowspan 属性允许您执行相同的操作，但针对的是行而不是列。您甚至可以将两者混合起来，创建一些看起来很时髦的布局。

Answer 2

只需像这样添加 colspan="number of columns" :

<table class="led">
    <tr class="table-title">
        <th colspan="5">LED (this should be full width of the table)</th>
    </tr>
    <tr class="top">
        <td>Product</td>
        <td>Product Description</td>
        <td>Panel Size</td>
        <td>Weekly Price Per Panel</td>
        <td>Weekly Price Per Square Metre</td>
    </tr>
</table>

Answer 3

您可以使用 html:

的 colspan 属性

table{
  border-collapse: collapse;
  }

<table border="1px">
<tr class="table-title">
    <th colspan="5">LED</th>
</tr>
<tr class="top">
    <td>Product</td>
    <td>Product Description</td>
    <td>Panel Size</td>
    <td>Weekly Price Per Panel</td>
    <td>Weekly Price Per Square Metre</td>
</tr>
  </table>

与 table 中的列相比，TH 的数量不同

Different number of TH's compared to columns in table

html

css

html-table

JSFiddle：https://jsfiddle.net/vnvn0qbz/