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

【问题标题】：What is the best way to style a vertical table with split background使用拆分背景设置垂直表格样式的最佳方法是什么
【发布时间】：2020-09-16 12:33:47
【问题描述】：

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

【问题讨论】：

标签： html css vue.js html-table bootstrap-4

【解决方案1】：

您的那种布局（如果这是您想要的对吗？），您需要为此折叠表格边框，以避免出现空白。为tr 添加一个表示thead 的特殊类并相应地对其进行样式设置。遵循<tr><th></th><td></td></tr> 的模式。使用 text-align 将它们居中，向右为th，向左为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>

【讨论】：