多列之后的相同单元格宽度被删除 [英] Equal cell width after multiple columns are removed
问题描述
更新：这里是
table-layout：fixed 根据其内容停止浏览器自动调整表的大小。那么你将不得不给每个 TD 一个设置宽度。任何没有设定宽度的 TD s将占用剩余宽度。 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:
- Creating columns of equal width
- How do you make a 100% width table with the columns all equal width?
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.
这篇关于多列之后的相同单元格宽度被删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
