HTML/CSS：表格宽度与 div 相同

Question

我想创建一个包含表格的表格。 我用了 div，在 div 里面，有一张桌子。 我希望表格宽度与 div 宽度相同。 div 宽度为 100%。 但结果是，表格宽度不适合 div 宽度。 下面是代码：

<body >
<div width = '100%' align='center'>
    <table>
        <tr>
            <td>Username</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="text"></td>
        </tr>
    </table>
<div>

任何人都可以帮忙吗？

Answer 1

只需将表格的宽度添加为 100 %。

 <style> div { background-color: lightblue; } table { background-color: red; } </style> <body > <div width = '100%' align='center'> <table width = '100%'> <tr> <td>Username</td> <td><input type="text"></td> </tr> <tr> <td>Email</td> <td><input type="text"></td> </tr> </table> <div>

Answer 2

如果你想直接在 html 中玩风格，你需要在你的标签中使用属性style="" 。 您将不得不添加一些 CSS 规则，例如width: 300px;

查看我的代码片段并使用<table style="">的宽度来看看会发生什么。 我已将 div 的宽度设置为 300px，而表格仅覆盖其父级的 90%，即 div。 如果将表格的宽度设置为 100%，红色边框将完全隐藏 div 的边框。

 <body> <div style="border: 1px solid black; width: 300px;"> <table style="border: 2px solid red; width: 90%;"> <tr> <td>Username</td> <td><input type="text"></td> </tr> <tr> <td>Email</td> <td><input type="text"></td> </tr> </table> </div> </body>