Question

我有一个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>

What I got so far

Answer 1

您需要向div添加box-sizing: border-box;，以便它不会扩展其宽度以添加填充。

如果使用border-box，则width和height属性（以及min / max属性）包括内容，填充和边框。

您的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列的大小并调整整个表的大小以匹配div

1 个答案: