HTML/CSS:表格宽度与div相同
HTML/CSS:表格宽度与div相同
提问于 2019-11-05 11:37:34
我想创建一个包含表的窗体。我使用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>
有人能帮上忙吗？
回答 2
Stack Overflow用户
发布于 2019-11-05 11:43:42
只需将表格的宽度添加到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>
Stack Overflow用户
发布于 2019-11-05 11:43:59
如果想要直接在html中使用样式，则需要在标记中使用属性style=""。您必须添加一些CSS规则，如width: 300px;。
请参阅我的代码片段，并尝试使用<table style="">的宽度来查看发生了什么。我将div的宽度设置为300px，而表只覆盖了其父目录的90%。如果将表格的宽度设置为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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58704132
复制相关文章
相似问题
腾讯云开发者
