html - 对齐表格列 HTML

Question

我终于能够对齐我网站页面表格中的列。虽然我找到了解决方案，但我不明白。这是我准备的小提琴。如果你删除

display: block

从 CSS 中，列完美居中。

事实是我不明白该指令导致问题的原因是什么，这是否意味着元素显示为块元素？它不应该导致元素（尤其是原始元素）填满一整行吗？

Answer 1

您的表格宽度会自动设置为适合其内容（不是页面的整个宽度），因此当您添加display:block;它时会填充此特定宽度。

如果将表格的宽度指定为 div 的宽度（设置为页面的宽度），您将看到预期的结果：

table{
  width: 100%;
}
.books tr{
  display: block;
  padding-bottom: 20px;
}

Answer 2

问题是表格没有完整的页面宽度或包裹表格的任何元素。它的宽度足以显示所有内容，因此您必须将表格设置为 100% 宽度才能看到预期的结果。

我添加了一个额外的边框来查看表格：

http://cssdeck.com/labs/ays6idqs

table { width: 100%; border: 1px solid red; }

Answer 3

我自己对表格有点困惑，但我会尽力解释。

破坏列对齐的原因display: block;是因为您覆盖了默认值，该默认值与创建表结构的值display: table-row;一起使用。<td>display: table-cell:

创建表格时，最好指定表格的总宽度，然后width在 HTML 中使用属性声明每列获得的部分。

所以，

HTML：

<td width='50%'>

CSS：

.books table {
  width:100%;  /* or whatever your desired width is */
}
.books tr{
  padding-bottom: 20px;
}

.books td{
    text-align: center;
    padding-bottom: 5px;
    font-size: 12pt;
    position: relative;
}

代替，

HTML：

<td>

CSS：

.books tr{
  padding-bottom: 20px;
}

.books td{
    width: 30%;
    text-align: center;
    padding-bottom: 5px;
    font-size: 12pt;
    position: relative;
}