html - 使用拆分背景设置垂直表格样式的最佳方法是什么

Question

如何使用 css 和 html 在拆分背景上组织和设置这些数据的样式？

标签： htmlcssvue.jshtml-tablebootstrap-4

Answer 1

你的那个布局（如果这是你想要的对吗？），你需要折叠你的表格边框，以避免空白。添加一个特殊的类来tr代表thead它并相应地设置它的样式。跟随模式<tr><th></th><td></td></tr>。使用 text-align 将它们与 right toth和 left to 居中td。

td, th {
  padding: 8px;
  font-size: 12px;
  width: 250px;
}

th { background: #E9EADA; text-align: right; }
td { background: #FCFCFC; text-align: left; }

.table-header > * {
  font-size: 16px;
  color: #238E98;
}

table { border-collapse: collapse; }

<table>
  <tr>
    <th>First name</th>
    <td>John</td>
  </tr>
  <tr>
    <th>Last Name</th>
    <td>Doe</td>
  </tr>
  <tr class="table-header">
    <th>Details</th>
    <td>---</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>33</td>
  </tr>
</table>