1

I am trying to create an html table using css. The first column is to be in monospace font, as it contains computer code.

The font-family attribute does not seem to work, however. This is the html file:

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

The corresponding css file contains the following:

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

I would be most grateful for a pointer of how to achieve the change of fonts. Thanks!

Greetings, Michael

Michael
  • 154
  • 1
  • 11
  • 1
    http://stackoverflow.com/questions/1238115/using-text-align-center-in-colgroup and http://stackoverflow.com/questions/1119106/why-is-styling-table-columns-not-allowed should explain why this is not working. – Hidden Hobbes May 18 '15 at 11:08

3 Answers3

5

COL and COLGROUP support a limited number of CSS styles.

You can use the nth-child(x) CSS3 selector instead, where x is the number of the column (1 for the first column) you want to style:

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>
Sandra Rossi
  • 11,934
  • 5
  • 22
  • 48
Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
0

You can simply achieve this by giving the class name to the corresponding td. Just like the following.

<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>
RJ Anoop
  • 763
  • 13
  • 26
0

Your problem seems to be in the class you declared. the command class should be in the respective td tags Here is the html code:

<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>
Anjaly
  • 31
  • 2