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

總結

以上是生活随笔為你收集整理的原生html表格属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。