Question

我有一个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>

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>

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>

表格的第一列尽可能宽，其他列的宽度相等

2 个答案: