Setting table column width

html css html-table
alamodey picture alamodey · May 30, 2009 · Viewed 484.8k times · Source

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

Gordon Gustafson picture Gordon Gustafson · May 30, 2009 

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

Related questions

Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this: <table cellspacing="1" cellpadding="1"> How can the same be accomplished using CSS?

Read More
Make a div fill the height of the remaining screen space

I am working on a web application where I want the content to fill the height of the entire screen. The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want …

Read More
Table fixed header and scrollable body

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table. Unfortunately the solutions I have found does not work with bootstrap or mess up the style. Here there is a simple bootstrap …

Read More