html - 水平滚动条问题

Question

我试图在这张 table 上显示一个水平滚动条，问题是我也强制显示滚动条，它不会工作，就像没有理由必须出现一样。

/image/I3KUk.png

我正在使用 Angular Material 组件；这是应用程序的整个 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>