如何格式化 CSS 中的 table 以便某些列的行向下移动其行高一半的距离？

Question

可能解决方案不存在或者是一块难啃的骨头。我有一个 table 编码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    table {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #3A3A3A;
        border-collapse: collapse;
    }
    table th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #3A3A3A;
        background-color: #B3B3B3;
    }
    table td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #3A3A3A;
        background-color: #ffffff;
    }
</style>

<title>Table</title>
</head>

<body>

<table>
<thead>
    <tr><th>boundary</th><th>slice</th><th>h_i</th><th>1/2 (h_{i+1}+h_i)</th></tr>
</thead>

<tbody>
    <tr><td>0</td><td></td><td>0.00</td><td></td></tr>
    <tr><td>1</td><td>1</td><td>2.26</td><td>1.13</td></tr>
    <tr><td>2</td><td>2</td><td>4.37</td><td>3.32</td></tr>
    <tr><td>3</td><td>3</td><td>6.32</td><td>5.35</td></tr>
    <tr><td>4</td><td>4</td><td>5.74</td><td>6.03</td></tr>
    <tr><td>5</td><td>5</td><td>4.90</td><td>5.32</td></tr>
    <tr><td>6</td><td>6</td><td>3.61</td><td>4.25</td></tr>
    <tr><td>7</td><td>7</td><td>0.00</td><td>1.80</td></tr>
</tbody>
</table>

</body>
</html>

我希望将 table 格式化为 CSS 以便属于奇数列的行向下移动其高度的一半。如下图所示。 Formatting the table in order to have rows shifted downwards

请避免 table 结构中的行跨越。我知道可以通过为偶数列跨越四行和为奇数列跨越两行来获得解决方案。但是这样做并不优雅，我会浪费很多空白的 td 标签。

这里的挑战是要有纯格式的解决方案，CSS，如果存在解决方案的话。

Answer 1

您可以使用变换：

table {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #3A3A3A;
  border-collapse: collapse;
}
table th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #3A3A3A;
  background-color: #B3B3B3;
}
table td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #3A3A3A;
  background-color: #ffffff;
}

:empty {
  opacity:0;
}

tbody tr td:nth-child(even) {
  transform: translateY(-50%);
  box-shadow:0 0 0 1px #3a3a3a
}

<table>
  <thead>
    <tr>
      <th>boundary</th>
      <th>slice</th>
      <th>h_i</th>
      <th>1/2 (h_{i+1}+h_i)</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>0</td>
      <td></td>
      <td>0.00</td>
      <td></td>
    </tr>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>2.26</td>
      <td>1.13</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>4.37</td>
      <td>3.32</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>6.32</td>
      <td>5.35</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
      <td>5.74</td>
      <td>6.03</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>4.90</td>
      <td>5.32</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
      <td>3.61</td>
      <td>4.25</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
      <td>0.00</td>
      <td>1.80</td>
    </tr>
  </tbody>
</table>

否则，witout CSS，也使用 rowspan 属性和最后一行的空单元格。

td:empty {
  opacity: 0;
}

table {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #3A3A3A;
  border-collapse: collapse;
}

table th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #3A3A3A;
  background-color: #B3B3B3;
}

table td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #3A3A3A;
  background-color: #ffffff;
}

:empty {
  opacity: 0;
}

<table>
  <thead>
    <tr>
      <th>boundary</th>
      <th>slice</th>
      <th>h_i</th>
      <th>1/2 (h_{i+1}+h_i)</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan=2>0</td>
      <td></td>
      <td rowspan=2>0.00</td>
      <td></td>
    </tr>
    <tr>
      <td rowspan=2>1</td>

      <td rowspan=2>2.26</td>

    </tr>
    <tr>
      <td rowspan=2>1</td>
      <td rowspan=2>1.13</td>
    </tr>
    <tr>
      <td rowspan=2>2</td>
      <td rowspan=2>4.37</td>
    </tr>
    <tr>
      <td rowspan=2>2</td>
      <td rowspan=2>3.32</td>

    </tr>
    <tr>
      <td rowspan=2>3</td>
      <td rowspan=2>6.32</td>
    </tr>
    <tr>
      <td rowspan=2>3</td>
      <td rowspan=2>5.35</td>

    </tr>
    <tr>
      <td rowspan=2>4</td>
      <td rowspan=2>5.74</td>
    </tr>
    <tr>
      <td rowspan=2>4</td>
      <td rowspan=2>6.03</td>
    </tr>
    <tr>
      <td rowspan=2>5</td>
      <td rowspan=2>4.90</td>
    </tr>
    <tr>
      <td rowspan=2>5</td>
      <td rowspan=2>5.32</td>
    </tr>
    <tr>
      <td rowspan=2>6</td>
      <td rowspan=2>3.61</td>
    </tr>
    <tr>
      <td rowspan=2>6</td>
      <td rowspan=2>4.25</td>
    </tr>
    <tr>
      <td rowspan=2>7</td>
      <td rowspan=2>0.00</td>
    </tr>
    <tr>
      <td rowspan=2>7</td>
      <td rowspan=2>1.80</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

https://html.com/tables/rowspan-colspan/

如何格式化 CSS 中的 table 以便某些列的行向下移动其行高一半的距离？

How to format a table in CSS so that the row of certain columns are shifted downwards by a distance half their row height?

html

css

row