如何用CSS实现表格奇数列的行下移自身半行高？

Hey there! I totally get your goal: you want to offset the content of odd-column table rows by half their own line height, and you want to avoid clunky rowspan workarounds that add messy empty <td> elements. Let's dive into a clean, CSS-only approach that keeps your table structure intact.

Core Idea #

We'll use CSS transform: translateY() to shift the content of odd columns, and adjust padding to make sure the table layout stays stable. We'll also handle edge cases like the first row to prevent content from spilling outside the table.

Modified Code #

HTML (unchanged from your original) #

<!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;
 /* Fix table layout to prevent column width shifts */
 table-layout: fixed;
 width: 100%;
}
table th {
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #3A3A3A;
 background-color: #B3B3B3;
 /* Keep header aligned, no offset */
 transform: translateY(0);
}
table td {
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #3A3A3A;
 background-color: #ffffff;
 /* Set a consistent line height for predictable offset */
 line-height: 22px;
}
/* Target odd-numbered columns (1st, 3rd, etc.) in tbody rows */
table tbody tr td:nth-child(odd) {
 /* Shift down by half the line height (22px / 2 = 11px) */
 transform: translateY(11px);
 /* Adjust padding to keep cell height consistent */
 padding-top: calc(8px + 11px);
 padding-bottom: calc(8px - 11px);
}
/* Reset offset for the first row's odd columns to avoid top overflow */
table tbody tr:first-child td:nth-child(odd) {
 transform: translateY(0);
 padding-top: 8px;
 padding-bottom: 8px;
}
</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>

Key Details Explained #

• transform: translateY(): This is the magic that shifts the content. We calculate half the line height (11px for a 22px line height) to get the exact offset you want.
• Adjusted Padding: When we shift the content down, we tweak the top and bottom padding to keep the cell's total height the same—this prevents the table from getting distorted.
• First Row Fix: The first row's odd columns don't need an offset, otherwise content would spill above the table. We reset those styles explicitly.
• Fixed Table Layout: table-layout: fixed ensures column widths stay consistent, so shifting content doesn't cause columns to resize unexpectedly.

Notes #

• If you change the line-height of your table cells, make sure to update the translateY value and the padding calculations to match half the new line height.
• This approach keeps your DOM clean—no extra empty tags, no rowspan tricks—all styling is handled purely with CSS.

内容的提问来源于stack exchange，提问作者LudgerSB