html - 带有圆角和行分隔符的 HTML/CSS 表格?
问题描述
我想制作一个带有圆角和行分隔符的 HTML 表格。
但是,看起来它们是互斥的:
行分隔符
tr {border-bottom: 1px solid #000000}
需要border-collapse: collapse
工作桌子圆角
table { border-radius: 4px }
不适用于border-collapse: collapse
我怎样才能做到这一点?
解决方案
您可以将内部包装table
为 div,并为该 div 加一个border-radius
plus overflow:hidden
。
Adiv
是一个block
元素,所以我用display:table
它来获得表格的宽度。但你可以使用inline-block
或其他。
见下文
td {
padding: 10px;
background: red;
}
tr {
border-bottom: 2px solid #000000;
}
table {
border-collapse: collapse;
}
.wrapper {
border-radius: 10px;
border: 2px solid green;
display: table;
overflow: hidden;
}
<div class="wrapper">
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
推荐阅读
- c++ - 如何解析代表树状数据结构的字符串
- android - 如何新鲜导航到特定屏幕?
- navigator - 本地主机上的 WebAuthn 开发
- r - 使用 mlr 包的成本敏感多标签分类
- java - Spring Reactive 使用 ServerRequest 获取正文 JSONObject
- python - pandas.pivot_table :如何命名聚合函数
- node.js - Babel 插件中的“Visitor.Program.enter()”和“pre()”有什么区别?
- mysql - 如何使用 where 更新具有多个值的单个列
- windows - git commit -am "Commit message" 不能在 vagrant 机器上正常工作
- javascript - 克隆维度列表并在克隆上进行数学运算