对齐表格列HTML

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

display: block

从CSS中，列完全居中

---

事实上，我不明白是什么指令导致了问题，不是吗？它不应该导致元素（特别是原始元素）填充整行吗？

您的表格宽度将自动设置为适合其内容（而不是页面的全宽），因此当您添加

显示：块时它填充此特定宽度

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

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

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

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


我自己对桌子有点困惑，但我会尽力解释

显示原因：块破坏列的对齐方式是因为您正在覆盖默认的
显示：表行
与
显示：表格单元格：
的
值一起使用，以创建表格的结构

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

所以

HTML:

而不是

HTML:

你为什么用桌子做这个？这不是表格数据！我问了一个关于这个的问题，在我看来，它们是表格，为什么不呢？
table { width: 100%; border: 1px solid red; }

<td width='50%'>

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

<td>

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

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