如何跨列应用字体系列样式

Question

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

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>

由于上面给出的代码适用，表格的前三列将具有银色背景色，接下来的两列将具有绿色背景色，最后一列将具有蓝色。

现在我的问题是，我是否可以类似地将其他样式（更具体地说是 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 和background。

您需要将字体样式单独应用于table 中的每个th 或td 标记。这很烦人，但是使用正确的样式声明而不是内联样式至少可以让它更快一点。

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

<table>
  <colgroup>
    <col span="3" style="background-color:red">
    <col span="2" style="background-color:green">
    <col span="1" style="background-color:blue">
  </colgroup>
  <tr>
    <th class="verdana">verdana</th>
    <th class="verdana">verdana</th>
    <th class="verdana">verdana</th>
    <th class="arial">arial</th>
    <th class="arial">arial</th>
    <th class="times">times NR</th>
  </tr>
  <tr>
    <th class="verdana">verdana</th>
    <th class="verdana">verdana</th>
    <th class="verdana">verdana</th>
    <th class="arial">arial</th>
    <th class="arial">arial</th>
    <th class="times">times NR</th>
  </tr>
</table>