表格的第一列宽度应根据内容自适应，其他列应保持等宽。

Question

表格的第一列宽度应根据内容自适应，其他列应保持等宽。

3

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

我想将表格整体宽度设置为页面宽度的95％，并使第一列的宽度足够显示产品名称而不换行（尽管我还希望其最大宽度为30％）。接下来的列我希望大小相等，并填充表格的可用宽度。

我尝试使用布局fixed和auto来设置表格，并使用table > thead > tr > th:first-child {覆盖第一列的样式，但没有找到正确的组合来解决这个问题。

必须使用表格而不是“纯”CSS，因为它会被模板引擎消耗，该模板引擎基于<thead>和<tbody>元素进行渲染逻辑，并且因为它是一个模板，如果可能的话，我希望不要依赖注入固定值（例如基于列数的计算，就像这个答案），但如果需要，我可以这样做。

<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>

- Offbeatmammal

请发布您的HTML以及您尝试实现的任何CSS？ - EGC

你考虑使用Bootstrap吗？ - Rohan Rao

Bootstrap - 不行。使用该模板难以添加其他依赖项。 - Offbeatmammal

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mahbub Moon · Answer 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>

- Offbeatmammal · Answer 2

从这里的评论/答案来看，似乎没有“纯”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>