HTML/CSS 表每个索引级别的不同垂直边距

如何解决HTML/CSS 表每个索引级别的不同垂直边距

我使用 Python 库生成下表的 HTML 代码”

如您所见，该表具有多个级别的索引：id、machine、component、time（抱歉，我在代码中没有正确的标题现在！），最后是带有值的列（RED、616 等）。

我可以使用什么 CSS 属性来增加行间距？具体来说，我希望能够为不同级别的索引设置不同的间距

• 两个不同的 id 值之间的空间非常大
• 两个具有相同 id 的 machine 值之间的大空格
• 同一台机器的 component 值之间的正常（没有上面那么大）空间
• 引用相同组件的 time 值之间的间距很小

在 previous question 中我被建议设置

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

然而，这增加了整体空间。

注意：我可以编辑 CSS，而不是 HTML（HTML 是由 Python 代码生成的）。

HTML 代码：

<style type="text/css">
    #T_2e3dd8b4_dff8_11eb_a71b_acde48001122 th.col_heading.level0 {
        font-size: 1.5em;;
    }

    #T_2e3dd8b4_dff8_11eb_a71b_acde48001122 td {
        border: solid 1px #000;;
        padding: 10px;;
    }

    #T_2e3dd8b4_dff8_11eb_a71b_acde48001122 th {
        border: solid 1px #000;;
    }

    #T_2e3dd8b4_dff8_11eb_a71b_acde48001122 tr {
        margin: 0px 10px;;
    }

    #T_2e3dd8b4_dff8_11eb_a71b_acde48001122 thead {
        display: none;
    }

    #T_2e3dd8b4_dff8_11eb_a71b_acde48001122row0_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row1_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row2_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row3_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row19_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row22_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row23_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row24_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row25_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row26_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row27_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row28_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row29_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row41_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row42_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row43_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row44_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row45_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row46_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row47_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row48_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row49_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row50_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row51_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row52_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row53_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row54_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row55_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row56_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row57_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row58_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row59_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row60_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row61_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row62_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row63_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row64_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row65_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row66_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row67_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row68_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row69_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row70_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row71_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row72_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row73_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row74_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row75_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row76_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row77_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row78_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row79_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row80_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row81_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row82_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row83_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row84_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row85_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row86_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row87_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row88_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row89_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row90_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row91_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row92_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row93_col0 {
        background-color: LightGray;
    }

    #T_2e3dd8b4_dff8_11eb_a71b_acde48001122row4_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row11_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row18_col0 {
        background-color: LightGreen;
    }

    #T_2e3dd8b4_dff8_11eb_a71b_acde48001122row5_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row6_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row7_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row8_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row9_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row10_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row12_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row13_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row14_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row15_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row16_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row17_col0 {
        background-color: white;
    }

    #T_2e3dd8b4_dff8_11eb_a71b_acde48001122row20_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row21_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row30_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row31_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row32_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row33_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row34_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row35_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row36_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row37_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row38_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row39_col0,#T_2e3dd8b4_dff8_11eb_a71b_acde48001122row40_col0 {
        background-color: DarkRed;
    }</style>
<table id="T_2e3dd8b4_dff8_11eb_a71b_acde48001122">
    <thead>
    <tr>
        <th class="blank"></th>
        <th class="blank"></th>
        <th class="blank"></th>
        <th class="blank level0"></th>
        <th class="col_heading level0 col0">count</th>
    </tr>
    <tr>
        <th class="index_name level0">id</th>
        <th class="index_name level1">machine type</th>
        <th class="index_name level2">component type</th>
        <th class="index_name level3">color</th>
        <th class="blank"></th>
    </tr>
    </thead>
    <tbody>

    <tr>
        <th id="T_2e3dd8b4_dff8_11eb_a71b_acde48001122level0_row20" class="row_heading level0 row20" rowspan=2>
            id1
        </th>
        <th id="T_2e3dd8b4_dff8_11eb_a71b_acde48001122level1_row20" class="row_heading level1 row20" rowspan=2>
            machine_1
        </th>
        <th id="T_2e3dd8b4_dff8_11eb_a71b_acde48001122level2_row20" class="row_heading level2 row20">
            component A
        </th>
        <th id="T_2e3dd8b4_dff8_11eb_a71b_acde48001122level3_row20" class="row_heading level3 row20">-</th>
        <td id="T_2e3dd8b4_dff8_11eb_a71b_acde48001122row20_col0" class="data row20 col0">RED</td>
    </tr>
    <tr>
        <th id="T_2e3dd8b4_dff8_11eb_a71b_acde48001122level2_row21" class="row_heading level2 row21">
            component B
        </th>
        <th id="T_2e3dd8b4_dff8_11eb_a71b_acde48001122level3_row21" class="row_heading level3 row21">-</th>
        <td id="T_2e3dd8b4_dff8_11eb_a71b_acde48001122row21_col0" class="data row21 col0">RED</td>
    </tr>

                <tr>
                        <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level0_row4" class="row_heading level0 row4" rowspan=15>id 2</th>
                        <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level1_row4" class="row_heading level1 row4" rowspan=15>machine B</th>
                        <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level2_row4" class="row_heading level2 row4" >component A</th>
                        <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level3_row4" class="row_heading level3 row4" >-</th>
                        <td id="T_3a052c94_dffb_11eb_8e39_acde48001122row4_col0" class="data row4 col0" >GREEN</td>
            </tr>
            <tr>
                                        <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level2_row5" class="row_heading level2 row5" rowspan=7>componenent C</th>
                        <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level3_row5" class="row_heading level3 row5" >2021-07-06 15:00:00-04:00</th>
                        <td id="T_3a052c94_dffb_11eb_8e39_acde48001122row5_col0" class="data row5 col0" >616</td>
            </tr>
            <tr>
                                                <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level3_row6" class="row_heading level3 row6" >2021-07-06 16:00:00-04:00</th>
                        <td id="T_3a052c94_dffb_11eb_8e39_acde48001122row6_col0" class="data row6 col0" >494</td>
            </tr>
            <tr>
                                                <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level3_row7" class="row_heading level3 row7" >2021-07-06 17:00:00-04:00</th>
                        <td id="T_3a052c94_dffb_11eb_8e39_acde48001122row7_col0" class="data row7 col0" >615</td>
            </tr>
            <tr>
                                                <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level3_row8" class="row_heading level3 row8" >2021-07-06 18:00:00-04:00</th>
                        <td id="T_3a052c94_dffb_11eb_8e39_acde48001122row8_col0" class="data row8 col0" >729</td>
            </tr>
            <tr>
                                                <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level3_row9" class="row_heading level3 row9" >2021-07-06 19:00:00-04:00</th>
                        <td id="T_3a052c94_dffb_11eb_8e39_acde48001122row9_col0" class="data row9 col0" >465</td>
            </tr>
            <tr>
                                                <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level3_row10" class="row_heading level3 row10" >2021-07-06 20:00:00-04:00</th>
                        <td id="T_3a052c94_dffb_11eb_8e39_acde48001122row10_col0" class="data row10 col0" >0</td>
            </tr>
            <tr>
                                                <th id="T_3a052c94_dffb_11eb_8e39_acde48001122level3_row11" class="row_heading level3 row11" >-</th>
                        <td id="T_3a052c94_dffb_11eb_8e39_acde48001122row11_col0" class="data row11 col0" >OK</td>
            </tr>


    </tbody>
</table>

这有效，但它增加了空间

解决方法

如果类名不变，则可以使用带有透明度和相邻元素选择器的 border-width 来实现所需的外观。

body { margin: 0; min-height: 100vh; display: flex; justify-content: space-around; align-items: center; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  padding: 5px;
  box-shadow: inset 0 0 0 2px #ccc;
}

thead { display: none; }

.row_heading,.data {
  position: relative;
  padding: 0.5em;
  border: solid 0px #0000; /* border-color = transparent */
  box-shadow: inset -3px -2px 0 -1px #ccc,inset -1px 2px 0 -1px #ccc;
}
.level0,.level0 + .level1,.level0 + .level1 + .level2,.level0 + .level1 + .level2 + .level3,.level0 + .level1 + .level2 + .level3 + .data {
  border-top-width: 2em; /* Gap for ID */
}
.level1,.level1 + .level2,.level1 + .level2 + .level3,.level1 + .level2 + .level3 + .data {
  border-top-width: 1em; /* Gap for Machine */
}
.level2,.level2 + .level3,.level2 + .level3 + .data {
  border-top-width: 0.5em; /* Gap for Component */
}

tr:first-child th,tr:first-child td {
  border-top-width: 0px !important; /* No gap for first (top) section */
}

<table>
  <thead>
    <tr>
      <th class="blank"></th>
      <th class="blank"></th>
      <th class="blank"></th>
      <th class="blank level0"></th>
      <th class="col_heading level0">count</th>
    </tr>
    <tr>
      <th class="index_name level0">id</th>
      <th class="index_name level1">machine type</th>
      <th class="index_name level2">component type</th>
      <th class="index_name level3">color</th>
      <th class="blank"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="row_heading level0" rowspan=7>id1</th>
      <th class="row_heading level1" rowspan=2>machine_1</th>
      <th class="row_heading level2">component A</th>
      <th class="row_heading level3">-</th>
      <td class="data">RED</td>
    </tr>
    <tr>
      <th class="row_heading level2">component B</th>
      <th class="row_heading level3">-</th>
      <td class="data">RED</td>
    </tr>
    <tr>
      <th class="row_heading level1" rowspan=5>machine_2</th>
      <th class="row_heading level2">component A</th>
      <th class="row_heading level3">-</th>
      <td class="data">RED</td>
    </tr>
    <tr>
      <th class="row_heading level2" rowspan=3>component B</th>
      <th class="row_heading level3">-</th>
      <td class="data">RED</td>
    </tr>
      <th class="row_heading level3">2021-07-06 16:00:00-04:00</th>
      <td class="data">494</td>
    </tr>
    <tr>
      <th class="row_heading level3">2021-07-06 17:00:00-04:00</th>
      <td class="data">615</td>
    </tr>
    <tr>
      <th class="row_heading level2">component D</th>
      <th class="row_heading level3">-</th>
      <td class="data">RED</td>
    </tr>

    <tr>
      <th class="row_heading level0" rowspan=15>id 2</th>
      <th class="row_heading level1" rowspan=15>machine B</th>
      <th class="row_heading level2">component A</th>
      <th class="row_heading level3">-</th>
      <td class="data">GREEN</td>
    </tr>
    <tr>
      <th class="row_heading level2" rowspan=7>componenent C</th>
      <th class="row_heading level3">2021-07-06 15:00:00-04:00</th>
      <td class="data">616</td>
    </tr>
    <tr>
      <th class="row_heading level3">2021-07-06 16:00:00-04:00</th>
      <td class="data">494</td>
    </tr>
    <tr>
      <th class="row_heading level3">2021-07-06 17:00:00-04:00</th>
      <td class="data">615</td>
    </tr>
    <tr>
      <th class="row_heading level3">2021-07-06 18:00:00-04:00</th>
      <td class="data">729</td>
    </tr>
    <tr>
      <th class="row_heading level3">2021-07-06 19:00:00-04:00</th>
      <td class="data">465</td>
    </tr>
    <tr>
      <th class="row_heading level3">2021-07-06 20:00:00-04:00</th>
      <td class="data">0</td>
    </tr>
    <tr>
      <th class="row_heading level3">-</th>
      <td class="data">OK</td>
    </tr>
  </tbody>
</table>

某些类已从 HTML 中删除，只是为了代码可读性。您只需要添加 CSS，无需更改 HTML 中的任何内容！