编辑 Angular Material 的表格单元格填充 [英] Editing Angular Material's Table Cell Padding
问题描述
当我使用开发人员工具检查元素时,它显示零填充,但是当我查看它并将鼠标悬停在它上面时,它非常清楚地在单元格中有填充.我不知道这是从哪里来的,以及设置td { padding: 0 !important }
什么都不做.
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 这是一个StackBlitz,显示了 Here is a StackBlitz showing the 虽然我建议避免更改 While I'd recommend to avoid changing the 这篇关于编辑 Angular Material 的表格单元格填充的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!display: table-cell;
和 vertical-align: inherit;
引起的>(通常是值 middle
)来自默认浏览器/用户代理 <td>
样式与设置的 height
tr.mat-row
.带有 CSS 类 .mat-row
的 默认设置高度为 48px
.您可以调整高度或设置为 height: auto;
然后根据需要调整 td.mat-cell
的填充.这有效地消除了使用开发人员工具进行检查时可见的感知填充.在检查 <td>
时,在 Chrome 开发人员工具中看到的绿色填充可视化是如何在工具中显示带有表格单元格的中间垂直对齐元素.如果您检查该 <td>
的计算机属性,您会看到它的四个边都填充了零.
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;
}
height: auto;
tr.mat-row
以及 td.mat-cell
上的自定义填充值.height: auto;
on tr.mat-row
as well as a custom padding value on td.mat-cell
in action.td.mat-cell
上的 display
属性值,但您可以将其更改为类似 inline-block
无需调整 mat-row
的 height
即可查看效果.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
.
登录
关闭