WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Set Fixed Width for <td> Regardless of its Content

Topic: HTML / CSSPrev|Next

Answer: Use the CSS table-layout Property

If you try to set fixed width for the table columns or <td> by simply applying the width property it may not work, because the default table layout algorithm is automatic. Therefore, first change the table's table-layout property to fixed then the width property will have any effect.

The following example will set up fixed width for the table columns regardless of the amount of text in its cells. Let's try it out to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Fixed Width for Table Columns</title>
<style>
    table {
        width: 300px;
    }
    th, td {
        width: 50%;
    }
    table.fixed {
        table-layout: fixed;
    }
    table, th, td{
        border: 1px solid black;
    }
</style>
</head>
<body>
    <table>
        <caption>Example 1. Auto</caption>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>John Carter</td>
            <td>[email protected]</td>
        </tr>
    </table>
    <br>
    <table class="fixed">
        <caption>Example 2. Fixed</caption>
            <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>Peter Parker</td>
            <td>[email protected]</td>
        </tr>
    </table>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties