水平滚动条问题

Question

我试图在这张桌子上显示一个水平的scrool酒吧，问题是我也强迫了scroolbar的显示，它不会工作，就好像没有理由为什么它必须出现。

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

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

const o1 = this.clientService.newGetClient(this.client_ids[0], this.auth_token).do(res => this.c = res);

`

CSS

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

Answer 1

您可以将<table>元素嵌套在<div>。

中

然后，您只需要向<div>添加两个CSS声明：

1. 申请max-width
2. 申请overflow-x: auto

工作示例：

＆＃13;
＆＃13;
table, th, td {
min-width: 80px;
padding: 3px;
border: 1px solid rgb(191, 191, 191);
}

.table-container {
max-width: 300px;
overflow-x: auto;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;