• 原生html表格属性


    一、 <table border="1"> 表格边框

    二、 <table border="1" cellspacing="0"> cellspacing单元格间距

    三、<table border="1" cellspacing="0" cellpadding="0"> cellpadding单元格边距

    四、border-collapse: collapse 边框合并,该属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示

    五、table,table tr th, table tr td { border:1px solid #0094ff; }为所有边框设置颜色

    表格合并案例

    <!-- 表格开始 -->
                    <table class="table table-bordered"  style="margin-bottom:4px">
                        <!-- 表头开始 -->
                        <thead>
                            <tr class="tableTh">
                                <td rowspan="2">联系人</td>
                                <td rowspan="2">名称</td>
                                <td rowspan="2" class="smallTd">类别</td>
                                <td colspan="3">情况</td>
                                <td colspan="4">推进</td>
                                <td rowspan="2" class="bigTd">问题</td>
                                <td rowspan="2" class="smallTd">问题类别</td>
                                <td rowspan="2" class="bigTd">建议</td>
                                <td rowspan="2">单位</td>
                            </tr>
                            <tr class="tableSonTh">
                                <td>第三方更好</td>
                                <td>第三方更好</td>
                                <td>第三方更好</td>
                                <td>第三方更好</td>
                                <td>第三方更好</td>
                                <td>第三方更好</td>
                                <td>第三方更好</td>
                            </tr>
                        </thead>
                        <!-- 表头结束 -->
                        <!-- 表格内容开始 -->
                        <tbody>
                            <tr class="bableBody"style="height:300px;overflow-y:scroll;">
                                <td>8888888888</td>
                                <td>8888888888</td>
                                <td>88888</td>
                                <td>8888888888</td>
                                <td>8888888888</td>
                                <td>8888888888</td>
                                <td>8888888888</td>
                                <td>8888888888</td>
                                <td>8888888888</td>
                                <td>88888888888888888888888888888888888888888</td>
                                <td>8888888888</td>
                                <td>88</td>
                                <td>8888888888</td>
                                <td>8888888888</td>
                            </tr>
                        </tbody>
                        <!-- 表格内容结束 -->
                    </table>
                    <!-- 表格结束 -->

    效果

    使用时特殊情况

    在CSS中定义了如下句子,可保网页不会再被撑开了。
    table{table-layout: fixed;}
    td{word-break: break-all; word-wrap:break-word;}

    注释一下:
    1.第一条table{table-layout: fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。
    2.td{word-break: break-all},一般用这句这OK了,但在有些特殊情况下还是会撑开,因此需要再加上后面一句(word-wrap:break-word;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。
  • 相关阅读:
    boost::asio中的implementation_type介绍
    boost::asio::io_service::run学习笔记
    vim使用笔记
    进程、线程运行状态查看包括线程在cpu上运行情况
    c++自旋锁——学习笔记
    grep搜索过滤指定目录
    /usr/bin/ld: cannot find -lstdc++ -lz问题
    linux下条件变量使用笔记
    map使用笔记
    关于友元函数在类内定义的问题--笔记
  • 原文地址:https://www.cnblogs.com/ll15888/p/12794604.html
Copyright © 2020-2023  润新知