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

 <table style="width: 100%"> <colgroup> <col span="1" style="width: 15%;"> <col span="1" style="width: 70%;"> <col span="1" style="width: 15%;"> </colgroup> <!-- Put <thead>, <tbody>, and <tr>'s here! --> <tbody> <tr> <td style="background-color: #777">15%</td> <td style="background-color: #aaa">70%</td> <td style="background-color: #777">15%</td> </tr> </tbody> </table>

Answer 2

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

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

The best practice is to keep your HTML and CSS separate for less code duplication, and for separation of concerns ( HTML for structure and semantics, and CSS for presentation).

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

Answer 3

Use the CSS below, the first declaration will ensure your table sticks to the widths you provide (you'll need to add the classes in your HTML):

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}

Answer 4

Alternative way with just one class while keeping your styles in a CSS file, which even works in IE7:

<table class="mytable">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>
<style>
    .mytable td, .mytable th { width:15%; }
    .mytable td + td, .mytable th + th { width:70%; }
    .mytable td + td + td, .mytable th + th + th { width:15%; }
</style>

More recently, you can also use the nth-child() selector from CSS3 (IE9+), where you'd just put the nr. of the respective column into the parenthesis instead of stringing them together with the adjacent selector. Like this, for example:

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>

Answer 5

These are my two suggestions.

1. Using classes. There is no need to specify width of the two other columns as they will be set to 15% each automatically by the browser.

    table { table-layout: fixed; } .subject { width: 70%; }

    <table> <tr> <th>From</th> <th class="subject">Subject</th> <th>Date</th> </tr> </table>

2. Without using classes. Three different methods but the result is identical.

   a)

    table { table-layout: fixed; } th+th { width: 70%; } th+th+th { width: 15%; }

    <table> <tr> <th>From</th> <th>Subject</th> <th>Date</th> </tr> </table>

   b)

    table { table-layout: fixed; } th:nth-of-type(2) { width: 70%; }

    <table> <tr> <th>From</th> <th>Subject</th> <th>Date</th> </tr> </table>

   c) This one is my favourite. Same as b) but with better browser support.

    table { table-layout: fixed; } th:first-child+th { width: 70%; }

    <table> <tr> <th>From</th> <th>Subject</th> <th>Date</th> </tr> </table>

Answer 6

 table { table-layout: fixed; } .subject { width: 70%; }

 <table> <tr> <th>From</th> <th class="subject">Subject</th> <th>Date</th> </tr> </table>

Answer 7

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 8

Try this instead.

<table style="width: 100%">
    <tr>
        <th style="width: 20%">
           column 1
        </th>
        <th style="width: 40%">
           column 2
        </th>
        <th style="width: 40%">
           column 3
        </th>
    </tr>
    <tr>
        <td style="width: 20%">
           value 1
        </td>
        <td style="width: 40%">
           value 2
        </td>
        <td style="width: 40%">
           value 3
        </td>
    </tr>
</table>

Answer 9

<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Demo

Answer 10

Here's another minimal way to do it in CSS that works even in older browsers that do not support :nth-child and the like selectors: http://jsfiddle.net/3wZWt/ .

HTML:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>Dmitriy</td>
        <td>Learning CSS</td>
        <td>7/5/2014</td>
    </tr>
</table>

CSS:

table {
    border-collapse: collapse;
    width: 100%;
}

tr > * {
    border: 1px solid #000;
}

tr > th + th {
    width: 70%;
}

tr > th + th + th {
    width: 15%;
}

Answer 11

Add colgroup after your table tag. Define width and number of column here. and add tbody tag. Put your tr inside of tbody.

<table>
    <colgroup>
       <col span="1" style="width: 30%;">
       <col span="1" style="width: 70%;">
    </colgroup>


    <tbody>
        <tr>
            <td>First column</td>
            <td>Second column</td>
        </tr>
    </tbody>
</table>

Answer 12

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 13

style="column-width:300px;white-space: normal;"