admin管理员组

文章数量:1391981

Sample table

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

Without the width:100% content should fit to each column container but I would like to make the table expand across the whole page. Setting table width: 100% equally distributes the column. I would like to make each label (Labels: Age, Gender, Some long label) fit it's column container and the rest equally divided among themselves (Values: 12, Male, Some long label value).

I know setting <td width="5%">Age</td> or setting it in css should do the job but I think this is counter productive especially if you have to do that with a lot of columns.

Is there a way to acplish this in css with lesser code, javascript or jquery maybe? Any hint or direction on how this can be done?

Note:

I've read this but I would like to avoid injecting width="%" inside html.

Sample table

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

Without the width:100% content should fit to each column container but I would like to make the table expand across the whole page. Setting table width: 100% equally distributes the column. I would like to make each label (Labels: Age, Gender, Some long label) fit it's column container and the rest equally divided among themselves (Values: 12, Male, Some long label value).

I know setting <td width="5%">Age</td> or setting it in css should do the job but I think this is counter productive especially if you have to do that with a lot of columns.

Is there a way to acplish this in css with lesser code, javascript or jquery maybe? Any hint or direction on how this can be done?

Note:

I've read this but I would like to avoid injecting width="%" inside html.

  • javascript
  • jquery
  • html
  • css
Share Improve this question edited May 23, 2017 at 12:06 CommunityBot 11 silver badge asked Mar 27, 2015 at 7:12 splucenasplucena 3833 gold badges8 silver badges17 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 3

May be colgroup can help you out. Try this

The HTML is:

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

If I understand you correctly, this is what you’re looking for:

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

or if you want the content to be “hugged” by a cell:

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

Are you looking for something like this.?

Then border-collapse, cellspacing & cellpadding might help you.

This is what I came up with. Thanks for the ideas.

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

本文标签： javascriptMake table content fit to width with table width 100 set in cssStack Overflow

版权声明：本文标题：javascript - Make table content fit to width with table width: 100% set in css - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744697281a2620357.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。