css 垂直旋转、居中+下对齐、跨浏览器的表格标题

x33g5p2x 于 2022-12-30 发布在其他

关注(0)|答案(1)|浏览(127)

我有一个旋转标题的表，在Chrome中看起来像预期的那样，但在Firefox中不是。

Chrome v108（垂直底部，水平中间）

Firefox v107（垂直居中，水平向右）

如何使它们跨浏览器工作，以便垂直旋转，垂直位于单元格底部，水平居中，并占用最小宽度？
我使用的代码是从this answer略有修改，让它在Chrome中工作：

table { border-collapse:collapse; font-family:sans-serif }
thead th {
    /* Rotate vertical: https://stackoverflow.com/a/47245068 */
    -ms-writing-mode:tb-rl;
    -webkit-writing-mode:vertical-lr;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    vertical-align:middle;
    text-align:left;
    padding:0.5em 0 0 0;
    opacity:0.5;
    font-size:90%;
}
tbody th { text-align:right; padding-right:0.5em }
tbody td { text-align:center; padding:0 0.2em }
.yes { font-weight:bold; color:#060 }
.maybe { color:#440 }
.no  { color:#500 }

<table><thead><tr>
    <th></th>
    <th class="yes">yes</th>
    <th class="maybe">maybe</th>
    <th class="no">no</th>
    <th>who?</th>
</tr></thead><tbody><tr>
    <th>Fri, Dec 9, 12pm</th>
    <td class="yes">2</td><td class="maybe">1</td><td class="no">1</td>
    <td><button>≡</button></td>
</tr><tr>
    <th>Wed, Dec 14, 12pm</th>
    <td class="yes">4</td><td class="maybe">0</td><td class="no">0</td>
    <td><button>≡</button></td>
</tr><tr>
    <th>Fri, Dec 16, 12pm</th>
    <td class="yes">0</td><td class="maybe">0</td><td class="no">1</td>
    <td><button>≡</button></td>
</tr></tbody></table>

css

来源：https://stackoverflow.com/questions/74745909/table-headers-that-are-rotated-vertically-aligned-centerbottom-cross-browser

1条答案

按热度按时间

gmol16391#

在Chrome、Firefox和iOS Safari上进行了测试，这似乎对我很有效：

thead th {
  vertical-align: bottom;
  text-align:     center;
  width:          0.5em;
  min-width:      0.5em;
  padding:        0;
}
thead th span {
  writing-mode: vertical-lr;
  transform:    rotate(180deg);

  /* slight horizontal offset to suit tastes */
  position:relative; left:-2px;
}

/* need following (or explicit width) or else the */
/* cells in the rows will force wrap every word   */
tbody th { white-space:nowrap }

/*************** unrelated formatting ***************/
table { border-collapse:collapse; margin:1em auto }
thead th { font-size:90% }
thead th span { opacity:0.5 }
th, td { vertical-align:middle; padding:0 0.5em }
th { text-align:right; font-weight:normal }

.yes { color:#090; font-weight:bold }
.maybe { color:#660 }
.no  { color:#600 }

tr > * { border-bottom:1px solid rgba(0,0,0,0.2)}
tr:last-child > * { border-bottom: 0 }

<table><thead><tr>
    <th></th>
    <th class="yes"><span>yes</span></th>
    <th class="maybe"><span>maybe</span></th>
    <th class="no"><span>no</span></th>
    <th><span>who?</span></th>
</tr></thead><tbody><tr>
    <th>Fri, Dec 9, 12pm</th>
    <td class="yes">2</td><td class="maybe">1</td><td class="no">1</td>
    <td><button>≡</button></td>
</tr><tr>
    <th>Wed, Dec 14, 12pm</th>
    <td class="yes">4</td><td class="maybe">0</td><td class="no">0</td>
    <td><button>≡</button></td>
</tr><tr>
    <th>Fri, Dec 16, 12pm</th>
    <td class="yes">0</td><td class="maybe">0</td><td class="no">1</td>
    <td><button>≡</button></td>
</tr></tbody></table>

赞(0）回复(0）举报 2022-12-30

我来回答

css 垂直旋转、居中+下对齐、跨浏览器的表格标题

Chrome v108（垂直底部，水平中间）

Firefox v107（垂直居中，水平向右）

1条答案

相关问题

热门标签

最新问答