Q:

How to Set Fixed Width for td Regardless of its Content

mhmadesk
Save to bookmark
|
2022-05-17
|
  263 
Very Easy
0

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

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this 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>johncarter@example.com</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>peterparker@example.com</td>
        </tr>
    </table>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

HTML / CSS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to Remove Underline from Link in HTML... >>
<< How to Reset or Remove CSS Style for a Particular ...