I am facing an issue with the CSS for my table. Despite using overflow-x: scroll, only half of the columns are being displayed on the screen out of the 15 total columns. Can anyone provide assistance with this problem?
.table {
font-family: Roboto,"Helvetica Neue",sans-serif;
border-collapse: collapse;
background-color: white;
//width: 1000px;
overflow-x: scroll;
overflow-y: scroll;
}
.table td {
border: 1px solid #ddd;
padding: 6px;
min-width: 150px;
font-size: small;
}
.table th {
padding-top: 4px;
padding-bottom: 4px;
text-align: left;
background-color: whitesmoke;
font-size: medium;
font-weight: bold;
color: black;
border: 1px solid #ddd;
}<div class="rule-container mat-elevation-z20">
<div fxLayout="row wrap" style="background-color: #a8b4c6">
<div fxFlex="85" fxLayoutAlign="center">
<p class="rules-class"><b>RULES</b></p>
</div>
<div fxFlex="15" fxLayoutAlign="flex-end">
<mat-icon class="close-table" (click)="closeMe()">close</mat-icon>
</div>
</div>
<table class="method-rules-table">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
---
</tr>
<tr *ngFor="let element of dataSource2" [style.color]="element.rowColor">
<td style="min-width: 250px;">Row1</td>
<td>Row2</td>
<td>Row3</td>
<td>Row4</td>
<td>Row5</td>
----
</tr>
</table>
</div>