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

This topic created in 2828 days ago, the information mentioned may be changed or developed.

描述

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

多谢啦！

滚动

宽度

table

横向

12 replies • 2018-09-01 13:29:27 +08:00

dixeran

Sep 1, 2018 via Android

overflow:auto;？

Corbusier

Sep 1, 2018

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

InternetExplorer

Sep 1, 2018

你这问题真的是。。。。

InternetExplorer

Sep 1, 2018

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

xxx749

Sep 1, 2018 via Android

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

ochatokori

Sep 1, 2018 via Android

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

rabbbit

Sep 1, 2018

xxx749

Sep 1, 2018 via Android

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

Corbusier

Sep 1, 2018

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

```html

```

Corbusier

Sep 1, 2018

@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

Sep 1, 2018

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

Corbusier

Sep 1, 2018

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