技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類(lèi)目錄

贊助商

最新文章

搜索

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

作者:admin    時(shí)間:2020-2-22 0:16:26    瀏覽:

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

表格td與td之間有空隙

表格td與td之間有空隙

這個(gè)表格的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>

demodownload

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

把表格td之間的空隙去掉

把表格td之間的空隙去掉

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

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

即是設(shè)置一個(gè)border-collapse的屬性為collapse，和設(shè)置border-spacing的屬性為0。

demodownload

解釋?zhuān)篊SS border-collapse 屬性

border-collapse 為表格設(shè)置合并邊框模型。

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

定義和用法

border-collapse 屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，還是象在標(biāo)準(zhǔn)的 HTML 中那樣分開(kāi)顯示。

可能的值

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

JavaScript 語(yǔ)法：

object.style.borderCollapse="collapse"

 

解釋?zhuān)篊SS border-spacing 屬性

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

說(shuō)明

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

可能的值

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

JavaScript 語(yǔ)法：

object.style.borderSpacing="15px"

實(shí)例

設(shè)置表格邊框之間的空白，本例演示如何設(shè)置單元格邊框之間的距離。

設(shè)置表格邊框之間的空白

設(shè)置表格邊框之間的空白

標(biāo)簽: css  css3  table  border-collapse  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */