添加表格，tr和单元格不同的特定边框样式和间距
马努纳
我想知道是否有可能使用html和/或CSS折叠表格轮廓的tr，而表格轮廓和trs以及tds和ths具有不同的边框样式。
我知道这很复杂，因此如果可以更清楚地说明，这是我要实现的目标：
蓬松的小猫
不，border-collapse仅适用于整个表格，它不是tr或td元素的有效属性，因此您无法将其应用于获得不同间距的元素。
但是，您可以通过将单元格内容添加到div中并将其用于某些样式来“伪造”它：
table照常将外部表格样式应用于- 将行样式应用于
th/td单元格的顶部和底部边框 - 将“单元格”样式应用于
th＆tds内的div 。
工作示例：
table {
border: 6px solid lightgray;
border-right-color: gray;
border-bottom-color: gray;
border-collapse: collapse;
}
td {
border-top: 5px solid gray;
}
tr:not(:last-child) td{
border-bottom: 5px solid gray;
}
th .cell,
td .cell {
margin: 5px;
padding: 5px;
border: 2px ridge lightblue;
}<table>
<tr>
<th><div class="cell">First Name</div></th>
<th><div class="cell">Last Name</div></th>
</tr>
<tr>
<td><div class="cell">John</div></td>
<td><div class="cell">Smith</div></td>
</tr>
<tr>
<td><div class="cell">Jane</div></td>
<td><div class="cell">Doe</div></td>
</tr>
</table>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
- 上一篇：Rails-即使在我的服务器上显示“已重定向到http：// localhost：3000”，也无法重定向
- 下一篇：如何在不破坏data.table的自定义评估的情况下调整[.data.table`中的j？
相关文章
Related 相关文章
- 1
导航栏和表格单元格之间的间距
- 2
当表格单元格的垂直和水平边框具有不同的颜色时出现问题
- 3
打印时无法显示表格和单元格边框
- 4
每个单元格和表格周围的边框
- 5
如何从表格单元格中删除填充和边框？
- 6
在只有日期和月份的单元格中添加年份（多个不同的年份）（Google表格）
- 7
表格单元格的间距
- 8
如何调整表格单元格边框的样式？
- 9
CSS显示和表格单元格的不必要间距
- 10
带有CSS显示和表格单元格的不必要间距
- 11
对某些单元格应用边框间距
- 12
悬停时向表格单元格添加左边框
- 13
Xfinium 移除特定表格单元格中的边框
- 14
使用Apache POI获取新单元格的边框和填充样式
- 15
表格和单元格的创建
- 16
NSTableView删除表格视图边框和单元格之间的填充/空格
- 17
使用Apps脚本将文本和图像添加到Google Doc中表格的特定单元格
- 18
删除<td>之间的边框和空格，但保持在<tr>和2列之间（每3个单元格）
- 19
删除<td>之间的边框和空格，但保持在<tr>和2列之间（每3个单元格）
- 20
表格周围边框，但单元格周围
- 21
表格单元格的边框颜色变化
- 22
表格单元格的边框颜色变化
- 23
在折叠单元格边框并显示浮动图片的同时向表格添加边框
- 24
在UICollectionView中边框和调整单元格的大小
- 25
从不同工作表上的不同单元格匹配、提取和添加数字
- 26
如果包含特定字母，如何更改字母的大小和样式并填充单元格的背景？
- 27
动态将colspan和/或rowpans添加到表格单元格
- 28
通过Javascript向表格单元格添加一些文本和输入框
- 29
Google表格：如何在特定单元格编号参考中填充和防止增加
我来说两句