html table overflow,html - Table Width 100% with Overflow Scroll - Stack Overflow

最新推荐文章于 2024-08-11 21:30:56 发布

蚊子也是肉啊

最新推荐文章于 2024-08-11 21:30:56 发布

阅读量275

点赞数

文章标签： html table overflow

本文介绍如何通过CSS设置使HTML表格既能水平滚动又能自动调整宽度填充容器，包括使用容器div、display:block属性及tbody hack等方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

You can't do it by changing display alone for the table, but there are a couple of ways you can achieve this.

1. Add a "scrolling" container div

You can up the standard table in a container div and give it the overflow: auto;, so it will have the scroll bar.

table { width: 100%; }

.scrollwrapper { overflow: auto; }

This means the table will stretch to at least 100% of the width even if it is not wide enough on its own, and if the content makes it wider than 100% them the div gets a scrollbar.

Working Example:

table {

width: 100%;

border: 1px solid blue;

}

.scrollwrapper {

overflow: auto;

}

td {

border: 1px solid #aaa;

}

Scrolling Wrapper - Wide Table

thisisoneverylongwordthatwillnotwrapinthetablecell	thisisoneverylongwordthatwillnotwrapinthetablecell	thisisoneverylongwordthatwillnotwrapinthetablecell
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.

Scrolling Wrapper - Narrow Table

Column 1	Column 2	Column 3
Short text	Short text	Short text

2. Table with display:block

This doesn't do what you want, but lets look at why...

When you give the table display:block property, it adds the scrollbar to tables if they are wider than the available space, which is what you want. However as you noted, if the table isn't as wide as the available space, width:100% doesn't make the columns stretch to fill the width:

Working Example of display:block on tables

table {

width: 100%;

border: 1px solid red;

overflow: auto;

display: block;

}

td {

border: 1px solid #aaa;

}

Display:Block - Wide Table

thisisoneverylongwordthatwillnotwrapinthetablecell	thisisoneverylongwordthatwillnotwrapinthetablecell	thisisoneverylongwordthatwillnotwrapinthetablecell
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.

Display:Block - Narrow Table

Column 1	Column 2	Column 3
Short text	Short text	Short text

As we can see in the example above, the table is actually stretching to 100%, however because the table row and cells don't fill the table. This is when I discovered the tbody hack...

3. Table with Display:block and tbody "hack"

Note that this is very much a hack and I've no idea how well supported it might be!

While playing around with this, I realised that the problem is that the rows and cells are not acting as normal rows and cells because they are not in a parent with display:table.

That's when I discovered that when I added display:table to the tbody, it gave the rows and cells a parent with the correct display type and it worked!

table { display: block; overflow: auto; }

table tbody { display: table; width: 100%; }

It seems to work even when the tbody is not explicitly added in the html.

Working Example of tbody hack

table {

border: 1px solid blue;

overflow: auto;

display: block;

}

table tbody {

display: table;

width: 100%;

}

td {

border: 1px solid #aaa;

}

Tbody "Hack" - Wide Table

thisisoneverylongwordthatwillnotwrapinthetablecell	thisisoneverylongwordthatwillnotwrapinthetablecell	thisisoneverylongwordthatwillnotwrapinthetablecell
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.