请教：Table标签的浏览器兼容性问题

tiangej 2017-08-30 06:45:11

>>目标
1. 建立3列的Table。Table宽度根据内容自适应。
2. 第一列，第二列宽度根据内容自适应，第三列宽度是Table剩余的宽度（宽度不固定，也不根据内容自适应）

>>课题
执行如下代码，
Chrome以外的浏览器：满足上述目标
Chrome：第二列，第三列的宽度不符合目标要求

请朋友们指点指点！



<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

	</head>

	<body>

		<table style="border: 2px solid;">

			<caption>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</caption>

			<tr>

				<td>1</td>

				<td>aaa</td>

				<td>aaaaaaaaa</td>

			</tr>

			<tr>

				<td>1</td>

				<td>aaaaaaaaa</td>

				<td>aaaa</td>

			</tr>

		</table>

	</body>

</html>

...全文

382 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

tiangej 2017-08-31

打赏
举报

实际上除了Chrome，其余浏览器默认状态就能满足需求。本帖子的问题本质是浏览器兼容问题

tiangej 2017-08-31

打赏
举报

需求是第二列，第三列自适应宽度，这点必须满足。朋友们有什么高招？

花下泥 2017-08-31

打赏
举报

td:nth-child(3) { width:auto; } 这个没什么用

花下泥 2017-08-31

打赏
举报

这种一般来说要设置第一二列的固定值吧，然后第三列才能自动算出Table剩余的宽度；不然它三列都会是根据内容自动计算宽度


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
		<style>
			table {
				width;100%;
				border-collapse: collapse;
				table-layout: fixed;
			}	
			td {
				border:1px solid black;
			}
			td:nth-child(1),td:nth-child(2) {
				width:200px;
			}
			td:nth-child(3) {
				width:auto;
			}
		</style>
    </head>
    <body>
        <table style="width:100%;">
            <caption>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</caption>
            <tr>
                <td>1</td>
                <td>aaa</td>
                <td>aaaaaaaaa</td>
            </tr>
            <tr>
                <td>1</td>
                <td>aaaaaaaaa</td>
                <td>aaaa</td>
            </tr>
        </table>
    </body>
</html>