Question

I’m really bad with html/css, so I’m just wondering if I can get your help.

Here’s a fiddle of this table fiddle. You can see that each of the td rows are the same width. However, I want, for example, to have the column on the left 200 px, and the column on the right 50 px.

What’s the most efficient way to achieve that if I’m going to have a lot of rows?

 <table id="theList">
        <thead>
        <tr>
          <th >Item</th>
          <th >Price</th>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td>Milk</td>
          <td>1.99</td>
      </tr>
      <tr>
          <td>Eggs</td>
          <td>2.29</td>
      </tr>


      </tbody>
    </table>

CSS

 th,td {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #000000;
    }
    tr {
        border: 1px solid gray;
    }
    td {
        width:200px;
        padding:3px;
    }
    th {
        background-color:#D2E0E8;
        color:#003366
    }
    table {
        border: 1pt solid gray;
    }

Answer 1

Keep in mind that you don’t need to set the style on every <td>, just on the <th>. All of the above answers would work, but I would prefer to set a class on the <th> and apply the width styles that way.

<table id="theList">
        <thead>
        <tr>
          <th class='header-250' >Item</th>
          <th class='header-50' >Price</th>
      </tr>

   ....

</table>

And CSS:

.header-250 {
    width: 250px;
    color: red; //example
}

.header-50 {
    width: 50px;
}

Just my style. I’m not a fan of inline styles, just for the simple fact you MAY want to style the headers differently. If you don’t need that, inline would work fine.