HTML/CSS 表格垂直边距

Posted 2023-03-06

【中文标题】HTML/CSS 表格垂直边距

【英文标题】：HTML/CSS table vertical margin

【发布时间】：2021-09-17 12:18:26

【问题描述】：

我使用 Python 库生成了以下 html 代码。我可以使用什么 CSS 属性来增加行间距？我尝试设置 tr 和 th 元素的边距和填充属性，但没有成功。

<style  type="text/css" >
    #T_5c9d5f2c_dea4_11eb_bdfd_acde48001122 th.col_heading 
          text-align: center;;
        #T_5c9d5f2c_dea4_11eb_bdfd_acde48001122 th.col_heading.level0 
          font-size: 1.5em;;
        #T_5c9d5f2c_dea4_11eb_bdfd_acde48001122 td 
          border: solid 1px #000;;
          padding: 10px;;
        #T_5c9d5f2c_dea4_11eb_bdfd_acde48001122 th 
          border: solid 1px #000;;
        #T_5c9d5f2c_dea4_11eb_bdfd_acde48001122 tr 
          margin: 0px 10px;
    #T_5c9d5f2c_dea4_11eb_bdfd_acde48001122row0_col0,#T_5c9d5f2c_dea4_11eb_bdfd_acde48001122row1_col0,#T_5c9d5f2c_dea4_11eb_bdfd_acde48001122row2_col0
            background-color:  LightGreen;
        </style><table id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122" ><thead>    <tr>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank level0" ></th>        <th class="col_heading level0 col0" >color</th>    </tr>    <tr>        <th class="index_name level0" >id</th>        <th class="index_name level1" >type</th>        <th class="index_name level2" >options</th>        <th class="blank" ></th>    </tr></thead><tbody>
                <tr>
                        <th id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122level0_row0" class="row_heading level0 row0" >id1</th>
                        <th id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122level1_row0" class="row_heading level1 row0" >machine</th>
                        <th id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122level2_row0" class="row_heading level2 row0" >-</th>
                        <td id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122row0_col0" class="data row0 col0" >green</td>
            </tr>
            <tr>
                        <th id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122level0_row1" class="row_heading level0 row1" >id2</th>
                        <th id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122level1_row1" class="row_heading level1 row1" >machine</th>
                        <th id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122level2_row1" class="row_heading level2 row1" >-</th>
                        <td id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122row1_col0" class="data row1 col0" >green</td>
            </tr>
            <tr>
                        <th id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122level0_row2" class="row_heading level0 row2" >id3</th>
                        <th id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122level1_row2" class="row_heading level1 row2" >machine</th>
                        <th id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122level2_row2" class="row_heading level2 row2" >-</th>
                        <td id="T_5c9d5f2c_dea4_11eb_bdfd_acde48001122row2_col0" class="data row2 col0" >green</td>
            </tr>
    </tbody></table>

谢谢！

【问题讨论】：

你为什么要以如此复杂的方式给出id？ :(

这是由 Python 代码生成的。

好的好的，谢谢你的信息！

【参考方案1】：

表格行不能有边距值。你能增加填充吗？那会奏效。否则，您可以在 class="highlighted" 行之前和之后插入 <tr class="spacer"></tr>。

或者

border-spacing 属性适用于这种特殊情况。

table 
  border-collapse:separate; 
  border-spacing: 0 1em;

【讨论】：

谢谢。我可以编辑 CSS 代码。你有机会尝试吗？它似乎不起作用。

它适用于我，我希望你也适用，问题是代码不是那么灵活。

【参考方案2】：

尝试将样式类添加到表格中。您需要添加“border-collapse”和“border-spacing”，如果您只想要行之间的空间，它应该看起来像这样：

  border-collapse: separate;
  border-spacing:  0 15px;

如果你想要行和列之间的空间，类似这样：

  border-collapse: separate;
  border-spacing:  15px;

【讨论】：

谢谢。你有机会尝试吗？它似乎不起作用。

我试过了，它确实对我有用。您的问题解决了吗？