如何在表格中制作一个扩展的 <tr>答案

【问题标题】：How to make one extended <tr> in table如何在表格中制作一个扩展的 <tr>
【发布时间】：2021-07-30 21:48:27
【问题描述】：

如图所示，我有一张桌子：

我想要做的是将日期行延长到最后。所以，我想要整行的蓝色背景。

这是我的代码：

<table class="table">
            <tbody>
            <tr class="list-heading"><td>DATE</td></tr>
            <tr v-for="(r, index) in filteredRows.slice(pageStart, pageStart + countOfPage)" class="list-content">
<!--                <th>{{ (currPage-1) * countOfPage + index + 1 }}</th>-->
                <td>{{ r.time }}</td>
                <td>{{ r.date }}</td>
                <td>{{ r.name }}</td>
            </tr>
            </tbody>
        </table>

我正在使用vue，但我认为它与此无关。这是我的 CSS：

table .list-heading {
    background-color: var(--main-title-color);
    color: #FFFFFF;
}

【问题讨论】：

在 <td>DATE</td> 上使用 colspan=3，更多信息：w3schools.com/tags/att_td_colspan.asp

标签： html css html-table

【解决方案1】：

您可以使用td 的colspan 属性来实现：

<tr class="list-heading"><td colspan="3">DATE</td></tr>

colspan 指定表格中单元格应跨越的列数（字面意思是列跨度）。

有一些关于它的信息here。

【讨论】：

【解决方案2】：

尝试使用td colspan 属性。像这样的：

<tr class="list-heading"><td colspan="3">DATE</td></tr>

应该将td扩展为3列，你可以根据需要改变列数。

【讨论】：

【解决方案3】：

使用这个

<tr>
  <td colspan="3">DATE</td>
</tr>

【讨论】：

【解决方案4】：

您可以使用colspan尝试以下代码sn-p

<tr class="">
<td colspan="td-number">value</td>
</tr>
tr.list-content{
color: red;
background: blue;
}

【讨论】：