html - 对齐表格列 HTML

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