使用css中设置的表宽度:100%，使表内容适合宽度

Make table content fit to width with table width: 100% set in css

本文关键字：100% css 使用 设置      更新时间：2023-09-26

样品表

<table>
    <tr>
        <td>Age</td>
        <td>12</td>
        <td>Gender</td>
        <td>Male</td>
        <td>Some long label</td>
        <td>Some long label value</td>
        ...
        ...
        could be more...
    </tr>
</table>

没有宽度：100%的内容应该适合每个列容器，但我想让表扩展到整个页面。设置表格宽度：100%均匀分布列。我想让每个标签（标签：年龄、性别、一些长标签）适合它的列容器，其余的在它们之间平分（值：12，男性，一些长标签值）。

我知道设置<td width="5%">Age</td>或在css中设置它应该可以完成这项工作，但我认为这会适得其反，尤其是当你必须对很多列这样做的时候。

有没有一种方法可以用较少的代码在css中实现这一点，比如javascript或jquery？关于如何做到这一点，有任何提示或指示吗？

注：

我读过这篇文章，但我想避免在html中注入width="%"。

可能是colgroup可以帮助您。试试这个

HTML是：

<table border = "1" cellspacing = "0" cellpadding = "0">
  <colgroup>
    <col>
    <col style="width:40%">
    <col>
    <col style="width:40%">
  </colgroup>
    <tr>
        <td>Age</td>
        <td>12</td>
        <td>Gender</td>
        <td>Male</td>
    </tr>
</table>

如果我正确理解你，这就是你想要的：

table { width: 100% }
td:nth-child(odd) { width: 5% }

或者如果你想让内容被一个单元格"拥抱"：

table { width: 100% }
td:nth-child(odd) { width: 1%; white-space: nowrap }

$(function(){
        $(window).load(function() {
            updateCellWidth()
        })
        $(window).resize(function() {
            updateCellWidth()
        })
})
function updateCellWidth() {
    var width = 0, cols = 0
    $("table td:nth-child(even)").each(function(){
        ++cols
        width += $(this).width()
    })
    if (cols > 0) {
        var evenCellWidth=($("table").width()-width)/cols
        $("table td:nth-child(even)").css("width", evenCellWidth + "px")
    }
}

你在找这样的东西吗。？

然后border-collapse、cellspacing&cellpadding可能会对您有所帮助。

这就是我想到的。谢谢你的想法。

<style type="text/css">
    table {
        border-collapse: collapse;
        width: 100%;
    }
    table td {
        border: 1px solid #000;
        white-space: nowrap;
    }
</style>
<body>
    <table id="tbl1">
        <tr>
            <td>Age</td>
            <td>12</td>
            <td>Gender</td>
            <td>Male</td>
            <td>Some Long Label</td>
            <td>Some Long Label Value</td>
        </tr>
    </table>
    <script type="text/javascript">
        var tbl = document.getElementById('tbl1');
        var rowCount = tbl.rows.length;
        var colCount = tbl.rows[0].cells.length;
        for (var i = 0 ; i < colCount; i++) {
            if (i%2 == 0) {
                tbl.rows[0].cells[i].style.width = tbl.rows[0].cells[i].innerHTML.length + 'px';
            }
        }
    </script>
相关文章：