原生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;)就可以解決。此樣式可以讓表格中的一些連續的英文單詞自動換行。