带有等宽字体列的 html 表格答案

【问题标题】：html table with column in monospace font带有等宽字体列的 html 表格
【发布时间】：2015-07-29 20:28:46
【问题描述】：

我正在尝试使用 css 创建一个 html 表。第一列是等宽字体，因为它包含计算机代码。

然而，font-family 属性似乎不起作用。这是html文件：

<html>    
<head>
<link rel="stylesheet" href="styles.css">
</head>    
<body>    
<table cellspacing="0" class="software">
<COLGROUP class="command">
<COLGROUP>
<tr>
  <td>command 1</td>
  <td>description</td>
</tr>
<tr>
  <td>command 2</td>
  <td>description</td>
</tr>
</table>    
</body>
</html>

对应的css文件包含以下内容：

table.software{
    font-family: Arial;
    font-size: 13pt;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
}    
table.software td{
    text-align: left;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    padding: 5px;
}    
.command{
    font-family: monospace;
    font-size: 10pt;
    width: 300;
}

我将不胜感激如何实现字体更改的指针。谢谢！

您好，迈克尔

【问题讨论】：

stackoverflow.com/questions/1238115/… 和 stackoverflow.com/questions/1119106/… 应该解释为什么这不起作用。

标签： html css fonts

【解决方案1】：

COL 和 COLGROUP 支持有限数量的 CSS 样式。

您可以改用 nth-child(x) CSS3 选择器，其中x 是您要设置样式的列号（第一列为 1）：

table.software{
    font-family: Arial;
    font-size: 13pt;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
}    

table.software td {
    text-align: left;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    padding: 5px;
}    

table.software td:nth-child(1) {
    font-family: monospace;
    font-size: 10pt;
    width: 300;
}

<table cellspacing="0" class="software">
<tr>
  <td>command 1</td>
  <td>description</td>
</tr>
<tr>
  <td>command 2</td>
  <td>description</td>
</tr>
</table>

【讨论】：

完美。谢谢，瑞克。

【解决方案2】：

您的问题似乎出在您声明的类中。命令类应该在各自的 td 标签中这是html代码：

<html>    
<head>
<link rel="stylesheet" href="new.css">
</head>    
<body>    
<table  class="software">
<tr id="d">
  <td class="command">command 1</td>
  <td>description</td>
</tr>
<tr>
  <td class="command">command 2</td>
  <td>description</td>
</tr>
</table>    
</body>
</html>

【讨论】：

【解决方案3】：

您可以通过将类名赋予相应的td 来简单地实现这一点。就像下面这样。

<body>    
<table cellspacing="0" class="software">

<tr>
  <td class="command">command 1</td>
  <td>description</td>
</tr>
<tr>
  <td class="command">command 2</td>
  <td>description</td>
</tr>
</table>    
</body>

【讨论】：