HTML/CSS table 垂直边距

Question

我使用 Python 库生成以下 HTML 代码。我可以使用什么 CSS 属性来增加行之间的 space？我尝试设置 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>

谢谢！

Answer 1

尝试将样式 class 添加到 table。您需要添加“border-collapse”和“border-spacing”，如果您只想在行之间添加 space，它应该看起来像这样：

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

如果你想在行和列之间 space 和这样的东西：

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

Answer 2

Table 行不能有边距值。你能增加填充吗？那行得通。否则，您可以在 class="highlighted" 行前后插入 <tr class="spacer"></tr>。

或者

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

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

HTML/CSS table 垂直边距

HTML/CSS table vertical margin

html

css

html-table

padding

margin