div实现table功能
程序员文章站
2022-07-07 15:37:34
...
div布局主要用到的css属性
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
参考：https://www.cnblogs.com/joshinrai/p/6668392.html
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面测试</title>
<style type="text/css">
.table,.table*{
margin: 0 auto;
padding: 0;
font-size: 14px;
font-family: Arial, 宋体, Helvetica, sans-serif;
}
.table{
display: table;
width: 80%;
border-collapse: collapse;
}
.tab_tr {
display: table-row;
height: 30px;
}
.tab_th{
display: table-cell;
font-weight: bold; /*给标题字体加粗*/
height: 100%;
border: 1px solid gray; /*设置单元格边框*/
text-align: center;
vertical-align: middle;
}
.tab-td{
display: table-cell;
height: 100%;
border: 1px solid gray;
text-align: center;
vertical-align: middle;
</style>
</head>
<body>
<div>
<div class="table">
<div class="tab_tr">
<div class="tab_th">名称</div>
<div class="tab_th">key值</div>
<div class="tab_th">value值</div>
<div class="tab_th">创建人ID</div>
<div class="tab_th">创建时间</div>
<div class="tab_th">修改人ID</div>
<div class="tab_th">修改时间</div>
<div class="tab_th">删除标记</div>
<div class="tab_th">操作</div>
</div>
<div class="tab_tr">
<div class="tab-td">名称</div>
<div class="tab-td">key值</div>
<div class="tab-td">value值</div>
<div class="tab-td">创建人ID</div>
<div class="tab-td">创建时间</div>
<div class="tab-td">修改人ID</div>
<div class="tab-td">修改时间</div>
<div class="tab-td">删除标记</div>
<div class="tab-td">编辑|删除</div>
</div>
</div>
</div>
</body>
</html>
参考：https://www.cnblogs.com/joshinrai/p/6668392.html
上一篇： Linux init
下一篇： html链接中的相对路径和绝对路径