我试图在div中创建一个带有表格的网页。 该表有100%宽度,有三列。 但是当我调整窗口大小时,桌子不会调整其宽度。
这是我使用的代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div style="width: 1400px; margin-left: auto; margin-right: auto">
<table width="100%" border="0">
<tbody>
<tr>
<td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
<td style="background-color: #DD185B; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
<td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
答案 0 :(得分:0)
表的宽度是父元素的100%,在这种情况下是你的div。你的div设置为1400px,因此表也是1400px。
答案 1 :(得分:0)
div width正在修复css属性。
https://jsfiddle.net/jst9u4zv/
<div style="margin-left: auto; margin-right: auto">
<table width="100%" border="0">
<tbody>
<tr>
<td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
<td style="background-color: #DD185B; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
<td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
</tr>
</tbody>
</table>
</div>
答案 2 :(得分:0)
只需将width: 1400px
更改为max-width: 1400px;
宽度是固定的,最大宽度是你可以达到的最大值。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div style="max-width: 1400px; margin-left: auto; margin-right: auto">
<table width="100%" border="0">
<tbody>
<tr>
<td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
<td style="background-color: #DD185B; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
<td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>