html - CSS 中的文本对齐适用于 但不适用于

Question

我正在尝试将表格中的文本居中对齐。但是，它只对 td 有效，对 th 无效。

表格、th、td 的 HTML 和 CSS:

table {
  width: 100%;
  border-collapse: separate;
  text-align: center;
}
th,
td {
  border-bottom: 1px solid #ddd;
  padding: 30px;
  text-align: center;
}

<table>
  <tr>
    <th><font size=6>Item name</font>
    </th>
    <th><font size=6>Brand</font>
    </th>
    <th><font size=6>Category</font>
    </th>
    <th><font size=6>Price</font>
    </th>
    <th><font size=6>Date of purchase</font>
    </th>
  </tr>
  <tr>
    <td><font size=4>{{ wish[4] }}</font>
    </td>
    <td><font size=4>{{ wish[6] }}</font>
    </td>
    <td><font size=4>{{ wish[5] }}</font>
    </td>
    <td><font size=4>{{ wish[7] }}</font>
    </td>
    <td><font size=4>{{ wish[3] }}</font>
    </td>
  </tr>
</table>

Answer 1

我怀疑你的 th 被其他地方覆盖了。

虽然我不推荐，但您可以这样做。

th,td {
  text-align: center !important;
}