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

Posted 2023-03-05

【中文标题】使用拆分背景设置垂直表格样式的最佳方法是啥

【英文标题】：What is the best way to style a vertical table with split background使用拆分背景设置垂直表格样式的最佳方法是什么

【发布时间】：2020-09-16 12:33:47

【问题描述】：

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

【参考方案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>