原生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;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。