水平滚动条问题

Question

我试图在这张桌子上显示一个水平的 scrool 杆，问题是我也强制了 scroolol bar 的显示，它不起作用，就像没有理由必须出现一样。

https://i.stack.imgur.com/I3KUk.png

我正在使用角度材质组件;这是整个CSS和应用程序代码的一部分。

<div class=" ng-clock docs-homepage-promo"></div>
    <div _ngcontent-c9="" class=" ng-clock docs-homepage-bottom-start" >
       <table> . . . </table>
    </div>
</div>

'

.CSS

.docs-homepage-promo[_ngcontent-c9] {
align-items : center;
display : flex;
flex-direction : column;
padding : 16px;
}
.docs-homepage-promo[_ngcontent-c9] h2[_ngcontent-c9] {
font-size : 25px;
font-weight : 400;
margin : 0 0 16px 0;
padding : 0;
}
.docs-homepage-promo[_ngcontent-c9] p[_ngcontent-c9] {
font-size : 16px;
font-weight : 400;
line-height : 28px;
margin : 0 0 24px 0;
padding : 0;
}
.docs-homepage-promo-desc[_ngcontent-c9], .docs-homepage-promo-img[_ngcontent-c9] {
width : 50%;
}
.docs-homepage-promo-img[_ngcontent-c9] {
text-align : center;
}
.docs-homepage-promo-desc[_ngcontent-c9] {
line-height : 2;
display : flex;
flex-direction : column;
justify-content : center;
}
.docs-header-start[_ngcontent-c9], .docs-homepage-bottom-start[_ngcontent-c9] {
text-align : center;
margin : 60px 0;
}
@media (max-width:720px) {
.docs-header-section[_ngcontent-c9] {
padding-top : 15px;
}
.docs-header-start[_ngcontent-c9], .docs-homepage-bottom-start[_ngcontent-c9], .docs-homepage-row[_ngcontent-c9] {
margin : 15px 0;
}
}

Answer 1

您可以将

<table>元素嵌套在<div>中。

然后，你只需要在你的<div>中添加两个CSS声明：

1. 应用max-width
2. 应用overflow-x: auto

工作示例：

table, th, td {
min-width: 80px;
padding: 3px;
border: 1px solid rgb(191, 191, 191);
}
.table-container {
max-width: 300px;
overflow-x: auto;
}

<div class="table-container">
<table>
    <thead>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
    <th>Column 6</th>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    </tbody>
    
</table>
</div>