Fixed Table Cell Width

css, html, html-table, layout

Solution

You could try using the `<col>` tag manage table styling for all rows but you will need to set the `table-layout:fixed` style on the `<table>` or the tables css class and set the `overflow` style for the cells

http://www.w3schools.com/TAGS/tag_col.asp

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

and this be your CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

Problem

A lot of people still use tables to layout controls, data etc. - one example of this is the popular jqGrid. However, there is some magic happening that I cant seem to fathom (its tables for crying out loud, how much magic could there possibly be?) How is it possible to set a table's column width and have it obeyed like jqGrid does!? If I try to replicate this, even if I set every `<td style='width: 20px'>`, as soon as the content of one of those cells is greater than 20px, the cell expands! Any ideas or insights?

Original source