经过大量修改,我终于为我的材质表有了一个不错的设置。 它有分页,有排序,有我需要的所有东西。 然而,它看起来不太对劲,因为我的几个列都是单位数字值,并且它们与我希望更大的列具有相同的宽度(例如过度包装的描述)。
由于对 scss(以及与此相关的 css)缺乏经验,我不知道如何解决这个问题。 我尝试以几乎所有我能想到的方式修改 flex 属性,但它似乎没有改变任何事情。
这个问题更加复杂,因为我无法轻松地使用材料表的“hack”来根据列标识符生成类,因为列是动态生成的。 我也可以传递宽度信息,但这似乎是一个无法维护的黑客。
有没有一种方法可以将样式应用于整个表格和标题,从而获得所需的外观?
我在 Angular10 中成功使用了这个。
首先,用 div 包裹你的表格,如下所示:
<div class='table-responsive'>
<mat-table>
....
</mat-table>
</div>
然后添加这个CSS
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
.mat-table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
margin: 0px;
}
.mat-row,
.mat-header-row {
display: table-row;
}
.mat-cell,
.mat-header-cell {
word-wrap: initial;
display: table-cell;
padding: 0px 5px;
line-break: unset;
width: auto;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
这将根据内容调整单元格的大小,并使您的表格可水平滚动!
假设您确实指的是角度材料表,这个可能会有所帮助: md-table - 如何更新列宽
对列宽和标题使用以下样式
columns={[
{
title: 'Create Date',
field: 'create_date',
cellStyle: {
whiteSpace: 'nowrap'
},
...
]}
options={{
headerStyle: {
backgroundColor: '#DEF3FA',
color: 'Black',
whiteSpace: 'nowrap'
},
functionFn() {
document.addEventListener('DOMContentLoaded', () => {
const table = document.getElementById(
'demo-table-v2'
) as HTMLTableElement;
const headers = table.querySelectorAll(
'th'
) as NodeListOf<HTMLTableCellElement>;
let startX: number,
startWidth: number,
currentColumn: HTMLElement | null = null;
let isResizing: boolean = false;
function onMouseDown(event: MouseEvent): void {
if (event.target && (event.target as HTMLElement).tagName === 'TH') {
currentColumn = event.target as HTMLElement;
startX = event.clientX;
startWidth = currentColumn.offsetWidth;
isResizing = true;
currentColumn.classList.add('resizing');
}
}
function onMouseMove(event: MouseEvent): void {
if (isResizing && currentColumn) {
const newWidth = startWidth + (event.clientX - startX);
currentColumn.style.width = `${newWidth}px`;
}
}
function onMouseUp(): void {
if (isResizing) {
isResizing = false;
if (currentColumn) {
currentColumn.classList.remove('resizing');
currentColumn = null;
}
}
}
headers.forEach((header) => {
header.addEventListener('mousedown', onMouseDown);
});
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
}
table {
table-layout: fixed;
width: 100%;
}
td, th {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
width: 85px;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
th {
cursor: col-resize;
}
th.resizing {
background-color: #ddd; /* Optional: to indicate the column is being resized */
}