horizontal scroll bar issue

Question

I am trying to display an horizontal scrool bar on this table, the problem isthat also I forced the scroolbar's display, it won't work, like if there is no reason why it has to appeare.

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

I am using angular materials components; this is the whole CSS and a part of code of the app

<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

You can nest your <table> element inside a <div> .

Then, you only need to add two CSS declarations to your <div> :

1. Apply a max-width
2. Apply overflow-x: auto

Working Example:

 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>