我有一个 div 作为标题，在它下面有一个表格作为帖子，有标题、正文和一个单元格和/或带有箭头的列和一个用于表示赞成票和反对票的计数器。 我遇到的第一个问题是对齐和第二个调整列的大小
这是我的代码
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table {
table-layout: fixed;
margin: 0 auto;
width: 50%;
}
#votes {
text-align: center;
}
div {
font-size: 25px;
margin: auto;
color: white;
background-color: black;
padding: 15px;
width: 50% ;
border-radius: 12px;
}
<div>RANDOM THINGS</div>
<table>
<tr>
<th id="title">Title</th>
<th id="votes" rowspan="3">
<img src='images/arrow_up.png' onclick='Upvote()'/>
<br>0<br>
<img src='images/arrow_down.png' onclick='Downvote()'/>
</th>
</tr>
<tr id="textBody">
<td rowspan="2">Text Body</td>
</tr>
<tr>
</tr>
</table>
最佳答案
您需要将 box-sizing: border-box; 添加到 div，这样它就不会为了添加填充而扩展它的宽度。
如果使用 border-box，宽度和高度属性(以及最小/最大属性)包括内容、填充和边框。
你的 css 最终会是:
div {
font-size: 25px;
margin: auto;
color: white;
background-color: black;
padding: 15px;
width: 50% ;
border-radius: 12px;
box-sizing: border-box;
}
其余不变。这里有一个 CodePen 展示它:https://codepen.io/javierojeda/pen/LqpLVN
但是，正如@hungerstar 所提到的...您不会为这类事情使用表格。您可能想要使用新的 display: grid、display: flex 甚至使用 3 个 div 和一些 CSS 来根据需要容纳它们。
更多信息:
关于html - 调整 HTML 列的大小并调整整个表格的大小以匹配 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54353300/