Advertisements
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:
Example
Try this code »<!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>Related FAQ
Here are some more FAQ related to this topic:
- How to remove cellspacing from tables using CSS
- How to highlight alternate table row using CSS
- How to make a DIV not larger than its contents using CSS
Advertisements
