更新:这里是colspans 的后续问题 https://stackoverflow.com/questions/9126565/colspan-equal-cell-width-after-multiple-columns-are-removed.
我有一个有 8 列的表。在运行时,任意数量的这些元素被删除。
其余的列将具有相同的宽度。问题是当元素内的文本具有不同的宽度时。因为浏览器似乎根据每个单元格内文本的长度来设置单元格宽度。好吧,这张图可能更能说明问题:
这是代码:
<!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>
我搜索了 stackoverflow 并找到了以下帖子,但它们不是我的答案:
- 创建等宽的列 https://stackoverflow.com/questions/6165574/creating-columns-of-equal-width
- 如何制作 100% 宽度且各列宽度相等的表格? https://stackoverflow.com/questions/5055299/how-do-you-make-a-100-width-table-with-the-columns-all-equal-width
您可以使用table-layout:fixed
on the table
停止浏览器根据其内容自动调整表格大小。然后你必须给每个TD
设定的宽度。任何TD
没有设置宽度的 s 将占用剩余宽度。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)