求 table表格固定列宽，不随窗口变化调整

cihron 2017-02-23 10:52:31

想让一个表格的总宽度等于各列的和，且不随之窗口的调整而发生变化

第一个想到了 table-layout: fixed;

IE9 下效果正常，结果 IE10、chrome 都无法达到预期效果，

求大神支个招，，，，，附上测试代码

<html>

<head>

	<title>Document</title>

	<style type="text/css">

		table,th,td{

			border: 1px solid black;

			}

		table{

			table-layout:fixed;

		}

		th,td{

			width: 500px;

			height: 50px;

		}

	</style>

</head>

<body>

	<table>

		<tr>

			<th>a00</th>

			<th>b00</th>

			<th>c00</th>

			<th>d00</th>

			<th>e00</th>

		</tr>

		<tr>

			<td>a11</td>

			<td>b11</td>

			<td>c11</td>

			<td>d11</td>

			<td>e11</td>

		</tr>

	</table>

</body>

</html>

...全文

674 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

cihren 2017-02-24

打赏
举报

引用 2 楼 qaz2499867 的回复:

给table 加个width 你就知道问题出在哪了

真实环境中表格的宽度是动态生成的，不可预知。

cihren 2017-02-24

打赏
举报

引用 1 楼 qaz2499867 的回复:

你现在不就是吗？总长2500px,和浏览器大小无关

现在在 IE10 里和 cihrom 当浏览器窗口变小时，表格也会变小的，而且表格宽度远大于浏览器宽度，却被缩小为窗口的100%了

痛苦的火龙果 2017-02-24

打赏
举报

引用楼主 cihron 的回复:

想让一个表格的总宽度等于各列的和，且不随之窗口的调整而发生变化第一个想到了 table-layout: fixed; IE9 下效果正常，结果 IE10、chrome 都无法达到预期效果，求大神支个招，，，，，附上测试代码
<html>
<head>
	<title>Document</title>
	<style type="text/css">
		table,th,td{
			border: 1px solid black;
			}
		table{
			table-layout:fixed;
		}
		th,td{
			width: 500px;
			height: 50px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<th>a00</th>
			<th>b00</th>
			<th>c00</th>
			<th>d00</th>
			<th>e00</th>
		</tr>
		<tr>
			<td>a11</td>
			<td>b11</td>
			<td>c11</td>
			<td>d11</td>
			<td>e11</td>
		</tr>
	</table>
</body>
</html>

给table 加个width 你就知道问题出在哪了

痛苦的火龙果 2017-02-24