How do I limit the table width to the containing element (or screen)?

后端未结

关注

 1  1837

I need to show tabular data using a table, but it will be within a fluid layout; I want to have a it fill the entire available width but not to expand horizonta

相关标签:

1条回答

盖世英雄少女心

2021-01-01 17:43
I'm including some markup below that tests the HTML/CSS to achieve what I believe you want.

There is a fixed-width cell style .fixedcell and fluid width cell style .fluidcell. I've set a fixed width (75px for this example) simply to illustrate things better.

The fluid width ones have width:auto so they fill the width of the remaining table space; they also importantly have white-space:nowrap so the text doesn't expand the cell height-wise (white-space:pre works too); and finally they have overflow:hidden so the text doesn't overflow the width and make things ugly, alternatively you could set overflow:scroll for it to have a scrollbar in those cells when/if necessary.

The table is set to be 100% width so it will expand to fit the screen/etc as needed. And the important thing regarding the table's style is the table-layout:fixed, this makes the table adhere to the layout of the page rather than auto-sizing itself based on its own content (table-layout:auto).

I also added some borders to help illustrate the boundaries of the table and cells.
```
<html>
<head>
    <title>Table with auto-width sizing and overflow hiding.</title>
    <style type="text/css">
        table {width:100%; border:solid 1px red; table-layout:fixed;}
        table td {border:solid 1px green;}
        .fixedcell {width:75px;}
        .fluidcell {width:auto; overflow:hidden; white-space:nowrap;}
    </style>
</head>
<body>
    Table with one fluid column:
    <table>
        <tr>
            <td class="fixedcell">row 1</td>
            <td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td>
            <td class="fixedcell">fixie</td>
            <td class="fixedcell">another</td>
        </tr>
    </table>

    Table with two fluid columns:
    <table>
        <tr>
            <td class="fixedcell">row 1</td>
            <td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td>
            <td class="fluidcell">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
            <td class="fixedcell">fixie</td>
            <td class="fixedcell">another</td>
        </tr>
    </table>
</body>
</html>
```
I tested it in several modern browsers and seemed to work correctly in each.

PS. Although tables are a no-no for page layout in general, tables are correct and encouraged for tabular data layout.
0 讨论(0)
发布评论:

提交评论
- 加载中...