table 使用的一些常用技巧

0
发布于 (更新时间： by 博主

使用 html 标签 table 时，布局的方式很容易忘记，很多新手在调整表格的样式时浪费了不少的时间，其他只要记住一些常用的技巧，就可以应付大部分的表格使用场景。

１、表格常用的范式，该模式也适用于直接应用 div + css 进行表格布局

html 代码

 <table class="table">
    <tr class="row">
      <td class="cell">张三</td>
      <td class="cell">李四</td>
      <td class="cell">王五</td>
    </tr>
    <tr class="row">
      <td class="cell">张三</td>
      <td class="cell">李四</td>
      <td class="cell">王五</td>
    </tr>
</table>
<!-- 与上面的效果是一样的 -->
<div class="table">
    <div class="row">
        <div class="cell">张三</div>
        <div class="cell">李四</div>
        <div class="cell">王五</div>
    </div>
    <div class="row">
        <div class="cell">张三</div>
        <div class="cell">李四</div>
        <div class="cell">王五</div>
    </div>
</div>

css 样式代码

    .table {
        border-collapse: collapse; /* 表格的边框合并为一个单一的边框 */
        border-spacing: 0; /* 设置相邻单元格的边框间的距离为 0 */
        display: table;
        border: 1px solid #ccc;
        margin: 5px;
        /* display: table 时 padding 会失效 */
    }
    .row {
        display: table-row;
        border: 1px solid #ccc;
        /* display: table-row 时 margin、padding 同时失效 */
    }
    .cell {
        display: table-cell;
        border: 1px solid #ccc;
        padding: 10px;
        width: 100px;
        text-align: center;
        /* display: table-cell 时 margin 会失效 */
    }

2、使用 col 对各的列宽进行单独控制

html 代码如下

    <table width="100%" border="1">
        <colgroup>
            <col width="100" /> <!--  width 规定列的宽度 pixels / % / relative_length -->
            <col width="200" />
            <col width="100" />
        </colgroup>
        <thead>
            <tr>
                <th>ISBN</th>
                <th>Title</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>3476896</td>
                <td>My first HTML</td>
                <td>$53</td>
            </tr>
            <tr>
                <td>2489604</td>
                <td>My first CSS</td>
                <td>$47</td>
            </tr>
        </tbody>
    </table>

3、table 表头分组

效果如下：

源码：

<table>
  <thead>
    <tr>
      <td></td>
      <th colspan="4">部门情况</th>
      <th colspan="4">外包情况</th>
    </tr>
    <tr>
      <td></td>
      <th>人数</th>
      <th>计划饱和度</th>
      <th>绝对饱和度</th>
      <th>相对饱和度</th>
      <th>人数</th>
      <th>计划饱和度</th>
      <th>绝对饱和度</th>
      <th>相对饱和度</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <a href="#">信息系统开发</a>
      </th>
      <td>30</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
    <tr>
      <th> 
        <a href="#">业务系统开发</a> 
      </th>
      <td>30</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
    <tr>
      <th> 
        <a href="#">支撑系统开发</a> 
      </th>
      <td>30</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
  </tbody>
</table>

4、table 固定头部、固定左则的列、固定右边的列如何实现？

实现思路：
可以参考归 element-UI 中的 table 组件，主要是通过创建几个相同的 col 控制的表格然后使用绝对定位 / 使用 css3 到原始表格上作为遮罩来实现看上去固定表头、固定左列或者固定右列的效果。（注意：如果想只通过固定 thead 来实现表头固定，滚动时会有 bug）
下面实现一个固定标题的表格：

源码如下：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>修改代码，右边会自动显示结果</title>
    <!--适应移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--css样式-->
    <style>
        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            width: 800px;
        }

        table td,
        table th {
            border: 1px solid #ccc;
            padding: 10px;
        }

        .content {
            width: 400px;
            overflow: auto;
            background: #fff;
        }

        .title {
            font-size: 20px;
            padding: 10px 0;
            width: 400px;
            background-color: #efefef;
        }

        .sub-title {
            font-size: 18px;
            width: 380px;
            background-color: #efefef;
        }
    </style>
    <!--引用jquery库-->
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="content">
            <legend class="title">
                <span class="title__no">1、</span>
                <span class="title__text">我是固定的大标题，滚动滚动条我也不变</span>
            </legend>
            <table cellpadding="0">
                <thead>
                    <tr>

                        <th align="left">列1 列1列1列1列1列1列1列1列1列1</th>

                        <th align="left">列2 列2列2列2列2列2列2列2列2列2</th>

                        <th align="left">列3 列3列3列3列3列3列3列3列3列3</th>

                        <th align="left">列4 列4列4列4列4列4列4列4列4列4</th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td align="left" colspan="4">
                            <div class="sub-title">1.1 我是固定的子标题，滚动滚动条我也不变</div>
                        </td>
                    </tr>
                    <tr>
                        <td align="left">
                            <div>1.1 内容</div>
                        </td>

                        <td align="left">
                            <div>1.1 内容</div>
                        </td>

                        <td align="left">
                            <div>1.1 内容</div>
                        </td>

                        <td align="left">
                            <div>1.1 内容</div>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" colspan="4">
                            <div class="sub-title">1.2 我是固定的子标题，滚动滚动条我也不变</div>
                        </td>
                    </tr>
                    <tr>
                        <td align="left">
                            <div>内容内容内容内容内容内容内容内容内容内容</div>
                        </td>

                        <td align="left">
                            <div>内容内容内容内容内容内容内容内容内容</div>
                        </td>

                        <td align="left">
                            <div>内容内容内容内容内容内容内容内容</div>
                        </td>

                        <td align="left">
                            <div>内容内容内容内容内容内容内容内容内容内容</div>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" colspan="4">
                            <div class="sub-title">1.3 我是固定的子标题，滚动滚动条我也不变</div>
                        </td>
                    </tr>
                    <tr>
                        <td align="left">
                            <div>内容内容内容内容内容内容</div>
                        </td>

                        <td align="left">
                            <div>内容内容内容内容内容</div>
                        </td>

                        <td align="left">
                            <div>内容内容内容内容内容内容</div>
                        </td>

                        <td align="left">
                            <div>内容内容内容内容内容内容内容内容</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                var $els = $('.content');
                $els.each(function() {
                    var This = $(this);
                    var $titles = This.find('.title, .sub-title');
                    This.parent().css('position', 'relative');
                    $titles.each(function() {
                        var _this = $(this);
                        var offset = _this.position();
                        var width = _this.width();
                        var newEl = _this.clone();
                        _this.css('opacity', '0');
                        newEl.attr('style', 'display: block !important;width: ' + width + 'px;word-break: break-all;white-space: normal;position:absolute;');
                        newEl.offset({
                            top: offset.top,
                            left: offset.left
                        });
                        This.parent().append(newEl);
                    });
                });
            });
        </script>

</body>

</html>

5、关于 thead、tbody、tfoot

如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了

6、table 列等宽样式设置


table {
table-layout: fixed;
display: table;
}

参考引用：
https://www.cnblogs.com/cowboybusy/p/10530547.html
https://www.w3school.com.cn/tags/tag_colgroup.asp

浏览次数: 2,706