0

可能解决方案不存在或难以破解。我有一个这样编码的表：

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

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

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

如果存在解决方案，这里的挑战是使用纯格式和 CSS 的解决方案。

4

1 回答 1

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;
}

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>

否则，在没有 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/

于 2020-07-09T12:39:00.773 回答