在等寬字體列中的html表格

我想用css創建一個html表格。第一列是等寬字體，因爲它包含計算機代碼。在等寬字體列中的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; 
}

我將不勝感激。對於如何實現字體的變化的指針。謝謝！

問候，邁克爾

來源

2015-05-18 Michael

http://stackoverflow.com/questions/1238115/using-text-align-center-in-colgroup和http：/ /stackoverflow.com/questions/1119106/why-is-styling-table-columns-not-allowed應該解釋爲什麼這不起作用。 –

感謝您的支持 – Michael

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>

來源

2015-05-18 11:07:52

完美。謝謝，瑞克。 – Michael

你可以簡單地實現這一點名稱到相應的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>

來源

2015-05-18 11:11:11

您的問題似乎是在您聲明的類中。命令類應該是在各自的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>

來源

2015-05-18 11:20:04 Anjaly

在等寬字體列中的html表格

回答

相關問題