在 Bootstrap 4 中，我正在努力在表标题中定位旋转文本。 理想情况下，我希望所有旋转的文本与单元格的底部对齐，并水平居中。 我尝试过不同的变换源，但中心似乎是正确的？
知道为什么旋转标题的单元格文本超出了单元格边框的范围吗？
.table-rotated-header {
transform-origin: center;
transform: rotate(-90deg);
height: 250px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<thead>
<tr>
<th> </th>
<th colspan="5" class="text-center">
<h3>Paint</h3</th>
<th colspan="2" class="text-center">
<h3>Wheels</h3>
</th>
<th colspan="2" class="text-center">
<h3>Interior</h3>
</th>
</tr>
<tr>
<th nowrap class="table-rotated-header">
<h5>Country</h5>
</th>
<th nowrap class="table-rotated-header">
<h5>White</h5>
</th>
<th nowrap class="table-rotated-header">
<h5>Red</h5>
</th>
<th nowrap class="table-rotated-header">
<h5>Blue</h5>
</th>
<th nowrap class="table-rotated-header">
<h5>Black</h5>
</th>
<th nowrap class="table-rotated-header">
<h5>Yellow</h5>
</th>
<th nowrap class="table-rotated-header">
<h5>18" Spider</h5>
</th>
<th nowrap class="table-rotated-header">
<h5>19" Sport</h5>
</th>
<th nowrap class="table-rotated-header">
<h5>Black</h5>
</th>
<th nowrap class="table-rotated-header">
<h5>White</h5>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>South Korea</td>
<td class="text-end">$10,400</td>
<td class="text-end">$900</td>
<td class="text-end">$0</td>
<td class="text-end">$0</td>
<td class="text-end">Included</td>
<td class="text-end">$900</td>
<td class="text-end">$12,200</td>
<td class="text-end">$6000</td>
<td class="text-end">$6000</td>
</tr>
</tbody>
</table>我会尝试灵活的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotated Table Header</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
/* CSS for Rotated Table Header */
.table-rotated-header {
writing-mode: vertical-rl; /* Vertical text */
text-orientation: mixed; /* Maintain horizontal layout */
white-space: nowrap;
text-align: center;
}
/* Style the table as needed */
.table {
border-collapse: collapse;
width: 100%;
}
/* Additional styling for cells */
.table th,
.table td {
border: 1px solid #ccc; /* Add borders for better visualization */
padding: 8px; /* Add padding for cell content */
text-align: center; /* Center text horizontally */
}
</style>
</head>
<body>
<table class="table">
<thead>
<tr>
<th> </th>
<th>
<h3>Paint</h3>
</th>
<th>
<h3>Wheels</h3>
</th>
<th>
<h3>Interior</h3>
</th>
</tr>
<tr>
<th>
<h5>Country</h5>
</th>
<th class="table-rotated-header">White</th>
<th class="table-rotated-header">Red</th>
<th class="table-rotated-header">Blue</th>
</tr>
</thead>
<tbody>
<tr>
<td>South Korea</td>
<td class="text-center">$10,400</td>
<td class="text-center">$900</td>
<td class="text-center">$0</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</body>
</html>