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