How to set different column in table to be different width in css?

css, html

Solution

Assuming your table has standard markup, you can use `nth-child` or `nth-of-type` to target specific cells in each row. You can substitute any number into `nth-child`, if your table has more columns.

/* nth-child(1) = the first td in each tr */
td:nth-child(1) {
  width: 100px;
  background: #ddd;
  }

/* the second */
td:nth-child(2) {
  width: 200px;
  background: #ccc;
}

/* the third */
td:nth-child(3) {
  width: 300px;
  background: #bbb;
 }

<table>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
     </tr>
    </tbody>
  </table>

Problem

There is a table which contain 3 columns. Now i want to set the first column 100px width,the second column 200px and the last column 300px. It is a awkward to set all the td with a id which inicate which columns it is . Is there a more wise way to do ?

Original source