使用CSS中设置table宽度为100%，使表格内容适应宽度。

Question

使用CSS中设置table宽度为100%，使表格内容适应宽度。

3

样例表格

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

没有设置width:100%时，内容应该适应每个列容器，但我想让表格扩展到整个页面。设置table width: 100%会等分列。我想让每个标签（标签：年龄，性别，一些长标签）适合其列容器，其余部分平均分配（值：12，男性，一些长标签值）。

我知道设置Age或在css中设置应该可以完成工作，但我认为这是低效的，特别是如果你必须对很多列进行操作。

有没有办法用更少的代码，在css、javascript或jquery中完成这个任务？任何提示或方向，如何完成这个任务？

注意：

我已经阅读了this，但我想避免在html中注入width="%".

- splucena

4个回答

2

如果我理解正确，这就是您要寻找的内容：

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")
    }
}

- Jarod

请将框架大小调整以使其在fiddle上工作。 - Jarod

0

这就是我想出来的。感谢提供的思路。

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

- splucena

0

你是否在寻找类似于this的东西？

那么，border-collapse、cellspacing和cellpadding可能会对你有所帮助。

- Ganesh Salunkhe

不，我希望它（表格）能够横跨整个页面扩展。 - splucena

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

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

- vibhu · Accepted Answer

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