如何增加表格列间距？附现有表格代码求优化方案

一、增大列间距的两种实用方法 #

方法1：调大单元格水平内边距（最简单直接） #

你当前代码里的padding: 12px 15px控制着单元格的内边距，把水平方向的数值调高，就能让列之间的空隙明显变宽。比如改成padding: 12px 25px，这种方式和你现有的border-collapse: collapse规则完全兼容，不用改动其他基础样式。

方法2：用border-spacing实现列间空白分隔 #

如果参考表格的列之间是纯粹的空白缝隙（不是单元格内边距），可以修改表格的边框合并规则：

1. 把.styled-table里的border-collapse: collapse改成border-collapse: separate
2. 添加border-spacing: 15px 0（第一个值是列间距，第二个是行间距，可按需调整数值）
   注意：这种方式下需要微调表头和单元格的边框样式，避免出现多余的边框缝隙。

二、其他优化建议 #

• 统一表头文本格式：把age、city、salary改成首字母大写的Age、City、Salary，保持视觉一致性
• 降低偶数行背景色透明度：当前的#8410e393偏亮，改成#8410e320会更柔和，不会抢内容的注意力
• 强化表头分隔：给表头行加粗边框，比如.styled-table thead tr { border-bottom: 2px solid #555; }，让表头和内容区的区分更清晰
• 添加行悬停效果：给tbody的行加hover样式，提升页面交互体验

修改后的完整代码示例 #

<style>
  .styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 600px; /* 适当加宽表格，适配更大的列间距 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }

  .styled-table thead tr {
    background-color: #6c6f7271;
    color: #000000;
    text-align: left;
    border-bottom: 2px solid #555; /* 强化表头分隔 */
  }

  .styled-table th,
  .styled-table td {
    padding: 12px 25px; /* 增大水平内边距，加宽列间距 */
  }

  .styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
  }

  .styled-table tbody tr:nth-of-type(even) {
    background-color: #8410e320; /* 降低透明度，更柔和 */
  }

  .styled-table tbody tr:hover {
    background-color: #f5f5f5; /* 行悬停效果 */
  }
</style>

<div>
  <table class="styled-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th> <!-- 统一首字母大写 -->
        <th>City</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ashish</td>
        <td>21</td>
        <td>Mumbai</td>
        <td>90000</td>
      </tr>
      <tr>
        <td>Yadnesh</td>
        <td>20</td>
        <td>Mumbai</td>
        <td>88000</td>
      </tr>
      <tr>
        <td>Vinit</td>
        <td>20</td>
        <td>Mumbai</td>
        <td>70000</td>
      </tr>
      <tr>
        <td>Pushkar</td>
        <td>21</td>
        <td>Mumbai</td>
        <td>84000</td>
      </tr>
      <tr>
        <td>Pushkar</td>
        <td>21</td>
        <td>Mumbai</td>
        <td>84000</td>
      </tr>
      <!-- and so on... -->
    </tbody>
  </table>
</div>

内容的提问来源于stack exchange，提问作者ashish