CODEWITHSUNDEEP
htmlcss
Leahcim
Leahcim

Reputation: 41929

Pretty basic question about styling tables

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

Upvotes: 1

Views: 90

Answers (3)

Salman Arshad
Salman Arshad

Reputation: 272106

You can use the COL element.

<table id="theList">
    <col class="column1" style="width: 200px;">
    <col class="column2" style="width: 50px;">
    .
    .
    .
</table>

Personally, I'd specify width on all columns of first row using inline styles (all but one column if table itself has a width).

Upvotes: 1

dmackerman
dmackerman

Reputation: 2966

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.

Upvotes: 1

maple_shaft
maple_shaft

Reputation: 10463

You can do this by writing an inline style into your HTML markup.

<table id="theList">
  <thead>
    <tr>
      <th style="width: 200px;">Item</th>
      <th style="width: 50px;">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 200px;">Milk</td>
      <td style="width: 50px;">1.99</td>
   ...

Upvotes: 1

Related Questions