Menu
Update: here is a follow up question with colspans.
I have a table with 8 columns. At runtime, any number of these elements are removed.
The remaining columns would have equal width. The problem is when the text inside the elements has difference width. Because it seems the browser sets the cell widths based on the length of the text inside each cell. OK, this image probably says it better:
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
width:600px;
}
table td{
border:1px solid red;
text-align:center;
background-color:#FFFFCC;
}
caption{
color:blue;
font-size:80%;
}
</style>
<title></title>
</head>
<body>
<table>
<caption>Original table</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>After some columns are removed</caption>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>I want these to have the same width</caption>
<tr>
<td>1</td>
<td>Two</td>
<td>Three</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
<table>
<caption>I want these to have the same width, too</caption>
<tr>
<td>1</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
</body>
</html>
I searched stackoverflow and found the following posts but they are not my answer:
676
You can use table-layout:fixed on the table to stop the browser auto resizing the table depending on its contents. Then you will have to give each TD a set width. Any TDs without a set width will take up the remaining width.
158
If you use percentages that add up to less than 100% then the web browser usually stretches everything as if it did. If you use percentages that add up to more than 100% then the cells may exceed the set width of the table, depending on browser. As long as they are all the same and they equal less than 100%, then they will divide the space (width of table) equally. If you are not sure how many columns you will have in the future just use 1% for the width. That gives you leeway for up to 100 columns. However, some testing is required. Not sure if all browsers are behaving this way.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
