表格的第一列尽可能宽，其他列等宽答案

【问题标题】：First column of table as wide as it needs to be, other columns equal width表格的第一列尽可能宽，其他列等宽
【发布时间】：2020-03-14 12:26:38
【问题描述】：

我有一个 HTML 表格，其中第一列是产品名称，其他列是销售数据（取决于产品，介于 2 到 5 个季度之间）

我正在尝试设置它的样式，使整个表格占页面宽度的 95%，并且第一列的宽度与显示产品名称所需的宽度一样宽（尽管我也想要max-width 的 30%）。后续列我希望大小相等并填充表格的可用宽度。

我已尝试为表格设置固定布局和自动布局，并使用 table > thead > tr > th:first-child { 覆盖第一列的样式，但未找到解决此问题的正确组合。

需要使用表格而不是“纯”CSS，因为它被模板引擎使用，该引擎基于<thead> 和<tbody> 元素执行渲染逻辑，并且因为它是一个模板，我宁愿不必这样做依赖注入固定值（例如，基于列数的计算，如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>

【问题讨论】：

请发布您的 HTML 和您尝试实现的任何 CSS？
你考虑使用 Bootstrap 吗？
引导程序 - 没有。很难用模板添加其他依赖项。

标签： html css

【解决方案1】：

如果你不想换行，那么你总是可以使用white-space:nowrap。

虽然我也想要 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>

【讨论】：

完美运行，但有一点奇怪......如果其中一列的名称比其他列短（例如<tr><th>Product<th>Quarter One 2019<th>Quarter Two 2019<th>Total</tr>，那么较短的命名列最终会更小。尝试看看我是否可以用伪造一个更长的名字 ...
如果希望除第一列之外的其他列大小相同，则需要使用 JS/jQuery。不知道你有没有用。

【解决方案2】：

从这里的 cmets/answers 来看，似乎没有“纯”CSS 版本。因为我不想包含任何依赖项（jQuery 或 Bootstrap），所以我最终编写了一些 javascript 来解决这个问题：

<html>

<head>
    <style>
table {
    border-collapse: collapse;
    width: auto;
}
table td {
    text-align: right;
}
.sasha {
    text-align: left;
}

    </style>
</head>

<body>

    <table id="mytable">
        <thead>
            <tr>
                <th class="sasha">QQ</th>
                <th class="diesel">Quarter One 2019</th>
                <th class="diesel">Quarter Two 2019</th>
                <th class="diesel">Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="sasha">Example Product One</td>
                <td>100</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td class="sasha">Example product two</td>
                <td>10</td>
                <td>20</td>
                <td>30</td>
            </tr>
            <tr>
                <td class="sasha">Example Three</td>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
            </tr>
        </tbody>

    </table>
    <script>
        var table = document.getElementById("mytable")

        var sashas = table.getElementsByClassName("sasha")
        var diesels = table.getElementsByClassName("diesel")
        var sashawidth = 0;

        for (let i = 0; i < sashas.length; i++) {
            w = parseInt(sashas[i].clientWidth);
            sashawidth = Math.max(sashawidth, w);
        }

        // now resize table to 100%
        table.style.width = "100%"
        var tablewidth = parseInt(table.clientWidth);
        // reset table sizing
        table.style.width = "auto"

        // cap first column width at 25%
        if (sashawidth > tablewidth * .25) {
            sashawidth = tablewidth * .25
        }

        // calculate width of table, minus first column, divide by "diesels"
        nw = (tablewidth - sashawidth) / diesels.length

        // set first col width (in case we capped it)
        sashas[0].style.width = sashawidth + "px"
        // and set diesels to be their new width
        for (let i = 0; i < diesels.length; i++) {
            diesels[i].style.width = nw-20 + "px" // allows for a little padding
            diesels[i].style.background = "blue"
        }
    </script>

</body>

</html>

</html>

【讨论】：