提问者:小点点

如何在CSS中设置表格格式,使某些列的行向下移动其行高的一半?


很可能解决方案并不存在,或者是一块难啃的骨头。 我有一个这样编码的表:

null

<!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>

null

我希望在CSS中对表格进行格式化,以便将属于奇数列的行向下移动一半的高度。 如下图所示。 设置表格格式以使行向下移动

请避免在表的结构中跨行。 我知道偶数列跨越四行,奇数列跨越两行,就有可能得到解。 但是那样做是不优雅的,而且我会浪费很多空白的td标签。

这里的挑战是使用纯格式的解决方案,使用CSS(如果有解决方案的话)。


共1个答案

匿名用户

您可以使用转换:

null

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>