很可能解决方案并不存在,或者是一块难啃的骨头。 我有一个这样编码的表:
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(如果有解决方案的话)。
您可以使用转换:
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>