100％宽度表与三个列在div中

我正在尝试使用div中的表格制作网页。该表格具有三列100％的宽度。但是，当我调整窗口的大小时，表格不会调整其宽度。100％宽度表与三个列在div中

这是我使用的代码：

<!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>

来源

2017-05-31 Nees

表是父元素的100％的宽度。在你的情况下，父元素是固定宽度为1400px的DIV。删除父DIV的宽度属性。 –

只要改变你的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>

来源

2017-05-31 17:47:26

Thnx m8！工作正常。 – Nees

@需要接受的答案发生了什么〜。〜？ –

不知道，再次接受。 – Nees

表格的宽度是父元素的100％，在这种情况下，你的div。您的div设置为1400px，因此表格也是1400px。

来源

2017-05-31 17:43:18 Kee225

div宽正在修复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>

来源

2017-05-31 17:44:18 tech2017

100％宽度表与三个列在div中

回答

相关问题