Setting table column width

Question

I've got a simple table that is used for an inbox as follows:

<table border="1">
     <tr>
      <th>From</th>
      <th>Subject</th>
      <th>Date</th>
     </tr>

How do I set the width so the From and Date are 15% of the page width and the Subject is 70%. I also want the table to take up the whole page width.

Answer 1

HTML:

<table>
  <thead>
    <tr>
      <th class="from">From</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[from]</td>
      <td>[subject]</td>
      <td>[date]</td>
    </tr>
  </tbody>
</table>

CSS:

table{
  width:100%;
  border:1px solid #000;
}
th.from, th.date{
  width:15%
}
th.subject{
  width:70%; /* Not necessary, since only 70% width remains */
}

Note that, for this to work in Internet Explorer, you may have to give your table a specific width (e.g., 900px). That browser has some problems rendering an element with percentage dimensions if its wrapper doesn't have exact dimensions.

Answer 2

<colgroup>
   <col span="1" style="width: 15%;">
   <col span="1" style="width: 75%;">
   <col span="1" style="width: 15%;">
</colgroup>

Answer 3

Depending on your body (or the div which is wrapping your table) 'settings' you should be able to do this:

body {
  width: 98%;
}

table {
  width: 100%;
}


th {
  border: 1px solid black;
}


th.From, th.Date {
  width: 15%;
}

th.Date {
  width: 70%;
}


<table>
  <thead>
    <tr>
      <th class="From">From</th>
      <th class="Subject">Subject</th>
      <th class="Date">Date</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Me</td>
       <td>Your question</td>
       <td>5/30/2009 2:41:40 AM UTC</td>
     </tr>
   </tbody>
</table>

Demo

Answer 4

Don't use the border attribute, use CSS for all your styling needs.

<table style="border:1px; width:100%;">
    <tr>
            <th style="width:15%;">From</th>
            <th style="width:70%;">Subject</th>
            <th style="width:15%;">Date</th>
    </tr>
... rest of the table code...
</table>

But embedding CSS like that is poor practice - one should use CSS classes instead, and put the CSS rules in an external CSS file.

Answer 5

Do you have any idea why IE8 doesn't support width for table in percentage?. If the content inside the column is large than it works otherwise it just take the width of the content and sets the same.