编辑角度材质的表格单元格填充 [英] Editing Angular Material's Table Cell Padding
问题描述
当我使用开发人员工具检查元素时,它会显示零填充,但是当我查看它并将其放在鼠标上时,它很明显在单元格中具有填充.我不知道这是哪里来的
td { padding: 0 !important }
什么都不做.
可感知的填充是由默认浏览器/用户代理vertical-align: inherit;
(通常为值middle
)引起的>样式,并在tr.mat-row
上设置了height
. CSS类为.mat-row
的<tr>
的默认高度为48px
.您可以调整高度或将其设置为height: auto;
,然后根据需要将填充调整为td.mat-cell
.这有效地消除了在使用开发人员工具进行检查时可见的感觉到的填充.在检查<td>
时,在Chrome开发人员工具中看到的绿色填充可视化效果是如何在工具中仅显示中间垂直对齐的带有表格单元的元素.如果检查<td>
的计算机属性,您会发现它在所有四个边上的填充均为零.
.mat-row {
height: auto;
}
.mat-cell {
padding: 8px 8px 8px 0;
}
这是 StackBlitz ,其中显示了tr.mat-row
上的height: auto;
以及自定义实际td.mat-cell
上的填充值.
尽管我建议避免更改td.mat-cell
上的display
属性值,但可以将其更改为inline-block
之类的值,以查看效果,而无需对mat-row
的height
进行任何调整.>
When I inspect the element with developer tools it shows zero padding, but when I look a it and mouse over it, it very clearly has padding within the cell. I have no idea where this is coming from, and setting
td { padding: 0 !important }
does nothing.
The perceived padding is being caused by display: table-cell;
and vertical-align: inherit;
(which usually is value middle
) from the default browser/user-agent <td>
styles in combination with a height
being set on the tr.mat-row
. The <tr>
with CSS class .mat-row
has a set height by default of 48px
. You can adjust the height or set to height: auto;
then adjust padding to the td.mat-cell
as needed. This effectively removes the perceived padding that is visible when inspecting with developer tools. The green padding visualization seen in something like Chrome developer tools when inspecting the <td>
is how just a middle vertically aligned element with table-cell is displayed in the tools. If you examine the Computer properties of that <td>
you'll see it has zero padding on all four sides.
.mat-row {
height: auto;
}
.mat-cell {
padding: 8px 8px 8px 0;
}
Here is a StackBlitz showing the height: auto;
on tr.mat-row
as well as a custom padding value on td.mat-cell
in action.
While I'd recommend to avoid changing the display
property value on td.mat-cell
, you can change it to something like inline-block
to see the effects without any adjustments to height
of mat-row
.
这篇关于编辑角度材质的表格单元格填充的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!