国产亚洲AV片在线观看18男人,污污污污污污18禁网站,91成人免费观看在线观看

技術頻道 - html技術

Table表格td之間有空隙？你少設了border-collapse

作者:admin 時間:2020-2-22 0:16:26 瀏覽:

一個表格(table)，當你設置了table和td的border寬度之后，你會發(fā)現(xiàn)單元格td與td之間有一點空隙，看起來整個表格不夠緊湊美觀，如下圖這樣：

表格td與td之間有空隙

這個表格的html代碼這樣：

<!DOCTYPE html>
<html lang="en">
<head>
<title>加邊框的表格(Bordered Table)</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 10px;
}
table {
    border:solid 1px #cccccc;
}
td,th {
    padding: 5px;
    border:solid 1px #cccccc;
}
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Make</th>
                <th>Model</th>
                <th>Year</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>Honda</td>
                <td>Accord</td>
                <td>2009</td>
            </tr>

            <tr>
                <td>2</td>
                <td>Toyota</td>
                <td>Camry</td>
                <td>2012</td>
            </tr>

            <tr>
                <td>3</td>
                <td>Hyundai</td>
                <td>Elantra</td>
                <td>2010</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

demo download

通常情況下，我們要把td之間的空隙去掉，呈現(xiàn)如下圖這樣的表格，這樣的表格看起來更加美觀緊湊：

把表格td之間的空隙去掉

我們要如何設置它的css呢？其實只需把table的css改成這樣即可：

table {
    border:solid 1px #cccccc;
    border-collapse: collapse;
    border-spacing: 0;
}

即是設置一個border-collapse的屬性為collapse，和設置border-spacing的屬性為0。

demo download

解釋：CSS border-collapse 屬性

border-collapse 為表格設置合并邊框模型。

所有主流瀏覽器都支持 border-collapse 屬性。

定義和用法

border-collapse 屬性設置表格的邊框是否被合并為一個單一的邊框，還是象在標準的 HTML 中那樣分開顯示。

可能的值

值	描述
separate	默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse	如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit	規(guī)定應該從父元素繼承 border-collapse 屬性的值。

JavaScript 語法：

object.style.borderCollapse="collapse"

解釋：CSS border-spacing 屬性

border-spacing 屬性設置相鄰單元格的邊框間的距離（僅用于“邊框分離”模式）。

說明

該屬性指定分隔邊框模型中單元格邊界之間的距離。在指定的兩個長度值中，第一個是水平間隔，第二個是垂直間隔。除非 border-collapse 被設置為 separate，否則將忽略這個屬性。盡管這個屬性只應用于表，不過它可以由表中的所有元素繼承。

可能的值

值	描述
length length	規(guī)定相鄰單元的邊框之間的距離。使用 px、cm 等單位。不允許使用負值。如果定義一個 length 參數(shù)，那么定義的是水平和垂直間距。如果定義兩個 length 參數(shù)，那么第一個設置水平間距，而第二個設置垂直間距。
inherit	規(guī)定應該從父元素繼承 border-spacing 屬性的值。