zoukankan      html  css  js  c++  java
  • 原生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;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。
  • 相关阅读:
    linux C/C++编程之库-动态库,静态库创建及使用
    类linux 系统iptables 系统初始化配置
    OS error set
    OpenWrt修改
    OpenWrt backfire trunk源码下载及编译
    OpenWrt compiles
    OpenWrt 学习网址
    nginx编译配置
    cocos2d-x中的坐标系
    SGU 231 Prime Sum 求&lt;=n内有多少对素数(a,b)使得a+b也为素数 规律题
  • 原文地址:https://www.cnblogs.com/ll15888/p/12794604.html
Copyright © 2011-2022 走看看