Question

我最近了解到，您可以使用background-color标签将<colgroup>样式跨越表格的各列。

table {
     border: 2px solid;
     border-collapse: collapse;
}
td {
     border: 2px solid;
}

<table>
    <colgroup>
        <col span="3" style="background-color:silver">
        <col span="2" style="background-color:green">
        <col span="1" style="background-color:blue">
    </colgroup>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>

按照上面给出的代码，表的前三列将具有银色bg颜色，后两列将具有绿色bg颜色，最后一列将具有蓝色。

现在我的询问是，我是否可以类似地将其他样式（更具体地说，是font-family属性）跨越到多个列？如果是这样，我该怎么办？

Answer 1

JavaScript可能对您有帮助，这是我的代码，

<table id='myTable'>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>
<br> 

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
let rows=document.getElementById("myTable").rows.length;

    for(let i=0;i<rows;i++)
    {
        // from col 1 to col 3
        for(let j=0;j<4;j++)
        {
            document.getElementById("myTable").rows[i].cells[j].style.fontFamily='verdana';
            document.getElementById("myTable").rows[i].cells[j].style.background='silver'   
        }
        // from col 4 to col 6
        for(let j=3;j<6;j++){
            document.getElementById("myTable").rows[i].cells[j].style.fontFamily='times new roman';
            document.getElementById("myTable").rows[i].cells[j].style.background='green'    
       }
       // the last one
        for(let j=6;j<7;j++){
            document.getElementById("myTable").rows[i].cells[j].style.fontFamily='arial';
            document.getElementById("myTable").rows[i].cells[j].style.background='blue' 
       }
    } 

}
</script>

Answer 2

不幸的是，这不是colgroup的工作方式。您不能在colgroup内应用字体相关的属性。您可以阅读有关样式here的可用选项的更多信息，但看来您可以应用的唯一样式属性是border，width，visibility和{ {1}}。

您将需要分别将字体样式应用于background中的每个th或td标签。这很烦人，但是使用适当的样式声明代替内联样式至少可以使其更快一些。

table

.verdana {
  font-family:"verdana";
}
.arial {
  font-family:arial;
}
.times {
  font-family:times new roman;
}

如何在各列上应用字体系列样式跨度

2 个答案: