Question

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

display: block

从CSS中，列完全居中。

事实是，我不明白该指令导致了什么问题，这是不是意味着elements are displayed as block elements？它不应该导致元素（特别是原始元素）填满整行吗？

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:来创建表的结构。

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

所以，

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;
}

对齐表格列HTML

3 个答案: