Question

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

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

<tr data-ng-repeat="user in users track by $index">

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

<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>

我非常感谢如何实现字体更改的指针。谢谢！

问候，迈克尔

Answer 1

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

您可以使用 nth-child(x) CSS3选择器，其中x是您要设置样式的列号：

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>

Answer 2

您可以通过将类名提供给相应的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>

Answer 3

您的问题似乎出现在您声明的课程中。命令类应该在相应的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>

带有monospace字体列的html表

3 个答案: