时间戳

首页 > 解决方案 > 如何在垫行之间应用边框半径和间距？

html - 如何在垫行之间应用边框半径和间距？

问题描述

这是我的代码https://stackblitz.com/edit/angular-vodqhe

我正在尝试使行如图所示在此处输入图像描述

标签： htmlangular

解决方案

根据MDN 文档：

【边距属性】适用于除了table-caption、table、inline-table以外的table显示类型的元素之外的所有元素 你基本上不能直接给表格行添加margin或padding。

如何为表格行设置边框并指定边距和填充取决于您使用的边框模型（折叠或分离）。

分离

在分离边界模型中，边缘与单元格的边界边缘重合。（因此，在此模型中，行、列、行组或列组之间可能存在间隙，对应于 'border-spacing' 属性。）

在此模型中，每个单元格都有单独的边框。'border-spacing' 属性指定相邻单元格的边界之间的距离。(...) 行、列、行组和列组不能有边框（即，用户代理必须忽略这些元素的边框属性）。

坍塌

折叠边界模型中的行、列、行组和列组的边缘与单元格边界居中的假设网格线重合。（因此，在这个模型中，行一起完全覆盖了表格，不留空隙；列也是如此。）

在折叠边框模型中，可以指定围绕单元格、行、行组、列和列组的全部或部分的边框。(...) 此外，在此模型中，表格没有填充（但有边距）。

因为你的代码边框模型是分开的，所以你应该使用这些 CSS 集

table {
  width: 100%;
  border-spacing: 0 8px !important;
}

td.mat-cell {
 padding: 16px 0 16px 0;
 border-bottom: 2px solid #ffa600;
 border-top: 2px solid #ffa600;
}

td.mat-cell:first-child {
  border-left: 2px solid #ffa600;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}

td.mat-cell:last-child {
  border-right: 2px solid #ffa600;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

我为你创建了一个堆栈闪电战。

推荐阅读