公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

基于CSS属性display:table的表格布局的使用

项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查发现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折实现了单元格的合并,即采用正行嵌套一个单独的 display:table的DIV,然后在嵌套的表格DIV内部通过控制行列数和行列的高度,实现单元格合并。个人建议全新实现使用<table> HTML标签即可

一、CSS display属性的表格布局相关属性的解释

  • 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>)

二、示例代码

1、普通表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display普通表格</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;}
.table-tr {display: table-row; height: 30px;}
.table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}
.table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}
</style>
</head>
<body>
    <div class="table">
        <div class="table-tr">
            <div class="table-th">省份/直辖市</div>
            <div class="table-th">GDP(亿元)</div>
            <div class="table-th">增长率</div>
        </div>
        <div class="table-tr">
            <div class="table-td">广东</div>
            <div class="table-td">72812</div>
            <div class="table-td">8.0%</div>
        </div>
        <div class="table-tr">
            <div class="table-td">河南</div>
            <div class="table-td">37010</div>
            <div class="table-td">8.3%</div>
        </div>
        <div class="table-tr">
            <div class="table-td">江苏</div>
            <div class="table-td">70116</div>
            <div class="table-td">8.5%</div>
        </div>
    </div>
</body>
</html> 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)