相关疑难解决方法(0)

我在容器中有一个基本表.该表将有大约25列.我试图在桌面溢出时添加一个水平滚动条,我正在度过一段非常艰难的时光.

现在发生的是,表格单元通过自动调整单元格的高度并保持固定的表格宽度来容纳单元格内容.

我很感激为什么我的方法没有解决这个问题的任何建议.

提前谢谢了!

CSS

.search-table-outter {margin-bottom:30px; }
.search-table{table-layout: fixed; margin:40px auto 0px auto;  overflow-x:scroll; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}
tr:nth-child(even)  {background: #f5f5f5;}
tr:nth-child(odd)   {background: #FFF;}

HTML

<div class="search-table-outter wrapper">
    <table class="search-table inner">
        <tr>
            <th>Col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
            <th>col5</th>
            <th>col5</th>
        </tr>
        <?php echo $rows; ?>
    </table>
</div>

JS小提琴(注意:如果可能的话,我希望水平滚动条位于带红色边框的容器中):http: //jsfiddle.net/ZXnqM/3/

是否可以mat-table在没有 JQuery 或任何其他附加插件的情况下向Angular 7 中的a 添加浮动水平滚动条？

我有一个mat-table显示 6 列，但也可以通过按下按钮动态添加 100 多列。
但随后布局中断。

HTML 部分：

<button (click)="showLess()" mat-stroked-button class="show-button">Show Less</button>
<button (click)="showMore()" mat-stroked-button class="show-button">Show More</button>

<div class="component data component-card">
<mat-card *ngIf="dataSource?.filteredData" class="mat-card">
    <mat-paginator [length]="length" [pageSize]="100" [pageSizeOptions]="[100, 250, 500, 1000, 2000]" showFirstLastButtons> </mat-paginator>
    <mat-table [dataSource]="dataSource" matSort class="table">
        <ng-container class="container" *ngFor="let displayedColumn of displayedColumns" matColumnDef="{{ displayedColumn }}">
            <mat-header-cell class="header-cell" *matHeaderCellDef >
                <span mat-sort-header class="sort-header">{{ displayedColumn | uppercase }}</span>
                <input class="table-input" matInput (keyup)="applyFilter($event.target.value)" (focus)="setupFilter(displayedColumn)" placeholder="Filter"/>
            </mat-header-cell>
            <mat-cell class="cell" *matCellDef="let item">{{ …

我在我的应用程序中使用Angular Material Data表。我需要显示带有水平滚动表的多列。我面临表格行边框的问题。它没有显示行的整个宽度。请检查所附图片以供参考。请帮助我解决此问题。

请检查链接以获取代码参考

https://stackblitz.com/edit/angular-mdxik6?file=app%2Ftable-basic-example.html

提前致谢。