CSS简介代码实现表格(table)只有横线没有竖线的效果,一个简约卡片化精美的数据表格(类似Bootstrap表格)
2023-09-11 14:15:54 时间
实现效果
简单来说先设置 table 的 border-collapse:collapse,把表格整体边框取消。然后设置 table,th,tr,td 底部边框线即可。
HTML:
<table>
<tr>
<th>编号(ID)</th>
<th>名称(Name)</th>
<th>描述(Describe)</th>
<th>排序(Sort)</th>
<th>操作(Operation)</th>
</tr>
<tr>
<td>01</td>
<td>产品经理</td>
<td>负责产品落地</td>
<td>one</td>
<td>无操作</td>
</tr>
<tr>
<td>02</td>
<td>架构师</td>
<td>负责技术架构</td>
<td>two</td>
<td>无操作</td>
</tr>
</table>
CSS:
table{
width:70%;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);/* 阴影 */
border-collapse:collapse;/* 取消表格边框 */
letter-spacing:1px;/* 文字缩进 */
}
table,th,tr,td{
border-bottom:1px solid #dedede;/* 表格横线 */
padding:29px;
text-align: center;
}
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- bootstrap精简教程
- 第二百五十四节,Bootstrap项目实战--案例
- 第二百三十七节,Bootstrap图标菜单按钮组件
- 第二百三十四节,Bootstrap表单和图片
- [Bootstrap] 3. Responsive Gridding (.hidden-sm, visible-md)
- SAP UI5 Bootstrap脚本的实现原理
- VM1059 bootstrap-table.min.js:7 Uncaught TypeError: Cannot read property 'classes' of undefined
- 日期时间选择器、Bootstrap日期和时间表单组件。bootstrap-datetimepicker实现年月日,时分秒的选择。
- 理解bootstrap的列偏移offset 和 推拉push/pull的区别?
- Bootstrap组件之下拉菜单
- 记录:禁用你的元素 bootstrap
- FastAdmin 中 Bootstrap-Table 列宽控制
- bootstrap, boosting, bagging 几种方法的联系
- swagger-ui升级swagger-bootstrap-ui界面好看到起飞