请教一个元素内部自定义滚动条的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2274 天前的主题，其中的信息可能已经有所发展或是发生改变。

描述

当缩放浏览器宽度小于指定宽度时，table 内出现如图中的横向滚动条，大于该宽度时，table 内的横向滚动条消失

多谢啦！

滚动

宽度

table

横向

12 条回复 • 2018-09-01 13:29:27 +08:00

dixeran

2018-09-01 12:24:03 +08:00 via Android

overflow:auto;？

Corbusier

2018-09-01 12:27:50 +08:00

@dixeran 不大对啊，老哥，这样做不到自适应浏览器宽度

InternetExplorer

2018-09-01 12:32:16 +08:00

你这问题真的是。。。。

InternetExplorer

2018-09-01 12:32:52 +08:00

你要问怎么让表格的宽度自适应浏览器，width: 100% 或者 width: 100vw

xxx749

2018-09-01 12:33:37 +08:00 via Android

@media screen and (max-width < val){
tag{overflow-x: scroll}
}
@media screen and (max-width > val){
tag{overflow-x: hidden}
}

ochatokori

2018-09-01 12:43:34 +08:00 via Android

min-width:指定宽度;
width:100%;

rabbbit

2018-09-01 12:46:38 +08:00

xxx749

2018-09-01 12:48:33 +08:00 via Android

@xxx749 max-width > val → min-width > val

Corbusier

2018-09-01 13:05:59 +08:00

@rabbbit 我写了一个跟您一样的 demo，为什么是横向滚动条一直存在...

```html

```

Corbusier

2018-09-01 13:07:54 +08:00

@rabbbit 我写了一个跟您一样的 demo，为什么是横向滚动条一直存在...

```html

<div>
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</table>
</div>
```

```css
table,td,th{
border: 1px solid black;
border-collapse: collapse;
}
table{
width:100%;
}

td,th{
min-width:1000px;
}
div{
overflow-x: auto;
}

```

rabbbit

2018-09-01 13:10:47 +08:00

min-width:1000px;
单元格宽度 1000px,超出屏幕宽度了

Corbusier

2018-09-01 13:29:27 +08:00

@rabbbit 我懂您的意思了，就是当缩放到单元格低于 100px 时候，会出现横向滚动条，那单元格并不是均分的情况下呢？