我有一个 HTML 表格，其中第一列是产品名称，可变数量的其他列是销售数据(在 2 到 5 个季度之间，具体取决于产品)
我正在尝试设计它的样式，使整个表格占页面宽度的 95%，并且第一列的宽度与显示产品名称所需的宽度一样，无需自动换行(尽管我也想要 30% 的 max-width。我希望后续列的大小相等并填充表格的可用宽度。
我已经为表格尝试了固定布局和自动布局，并使用 table > thead > tr > th:first-child { 覆盖了第一列的样式但没有找到解决这个问题的正确组合。
需要使用表格而不是“纯”CSS，因为它被一个模板引擎使用，该引擎根据 <thead> 执行渲染逻辑。和 <tbody>元素，并且因为它是一个模板，所以我宁愿不必依赖注入(inject)固定值(例如基于列数的计算，如 this answer )，但如果需要我可以
<html>
<head>
<style>
table {
table-layout: fixed;
width: 95%;
border: 1px solid;
}
table>tbody>tr>th {
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Product</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example Product One</td>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>Example product two</td>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>Example Three</td>
<td>1000</td>
<td>2000</td>
<td>3000</td>
</tr>
</tbody>
</table>
</body>
</html>
最佳答案
如果你不想换行，那么你总是可以使用white-space:nowrap。
though I also want a max-width of 30%
这取决于您有多少列以及第一列中最大的文本是多少。
.firstColumnNowrap {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
width: 95%;
}
.firstColumnNowrap thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.firstColumnNowrap tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.firstColumnNowrap thead tr th:first-child, .firstColumnNowrap tbody tr td:first-child {
white-space:nowrap
}
.firstColumnNowrap thead tr th:not(:first-child), .firstColumnNowrap tbody tr td:not(:first-child) {
max-width:30%;
}<table class="firstColumnNowrap">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>I have an HTML table where the first column</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>I have an HTML table where the first column is the product name</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>关于html - 表格的第一列尽可能宽，其他列等宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58926351/