HTML表格中的花式邊框

所以我正在設計一個表格，並且我想爲表格標題製作一個相當有趣的下劃線。HTML表格中的花式邊框

我雖然很辛苦，並在網上看了一下，但找不到任何東西。

這是表結構：

<table> 
    <thead> 
     <tr> 
      <td>Number</td> 
      <td>Name</td> 
      <td>Address</td> 
     </tr> 
    </thead> 

    <tbody></tbody> 
</table>

而且我現在的造型：

table { 
    width: 100%; 
} 

    table thead { 
     font-weight: bold; 
    } 

     table thead td { 
      margin-right: 5px; 
      border-collapse: separate; 
      border-spacing: 10px 5px; 
      border-bottom: 2px solid #427AA8; 
     } 

    table tbody { 
     font-size: 90%; 
    } 

     table tbody tr { 
      line-height: 2em; 
      border-bottom: 1px solid #CCC; 
     } 

     table tbody td { 
      padding: 0 5px; 
     }

下面是代碼的的jsfiddle：http://jsfiddle.net/tYA4e/1/

我所尋找的是一個突破在列之間的邊界，但只在thead。

和我試圖實現一個例子：http://i.imgur.com/OHrhJ.jpg

有沒有辦法用一些簡單的CSS實現這一目標？

來源

2012-07-05 Samuel Parkinson

邊框必然會擴展其元素的整個寬度;因此只能在邊界必須應用於子元素的元素的寬度上部分地擴展邊界，並相應地調整大小。

這就是說，這是可以實現的，似乎是與嵌套td中的元素（在這種情況下span），並使用以下CSS的唯一途徑：

table thead td span { 
    display: inline-block; 
    width: 80%; 
    border-bottom: 2px solid #427AA8; 
}

JS Fiddle demo。

不過，值得注意的是，對於表格標題，th（表格標題）元素可能更適合您在這種情況下使用。

在進一步認爲是，當然，也可以使用樣式hr元件，其允許你給在hr的寬度的像素級別的控制，它最多可以從延伸到，在這個例子中，10px父td）的右邊緣：

table thead td hr { 
    width: 80%; 
    margin: 0 10px 0 0; 
    border-bottom: 2px solid #427AA8; 
}

JS Fiddle demo。

來源

2012-07-05 14:17:09

我認爲我的選擇是'span'解決方案，我想它會在所有瀏覽器中更一致地工作。但感謝發佈這兩個解決方案。 – 2012-07-05 14:24:43

你非常歡迎;我很高興能夠（希望）有所幫助！ =） – 2012-07-05 14:25:34

您也可以將th用於標題單元格 - >不再需要使用add和tbody將行分隔成組 - 使用較少的標記和較少的CSS。

<table> 
    <tr> 
     <th>headlinecell</th> 
    </tr> 
    <tr> 
     <td>contentcell</td> 
    </tr> 
</table>

現在只是樣式th和td。

來源

2012-07-05 14:22:58 Daniel

它可能會成爲一個相當大的項目，所以儘管我同意你的意見，但我正在使用這種標記，因爲它讓其他開發人員很清楚發生了什麼。 – 2012-07-05 14:26:20

我曾經使用過的每個瀏覽器都會在沒有'tbody'元素的情況下向''表中插入一個。雖然規範沒有要求它的存在，但是一旦DOM被構建，它就會在那裏。既然如此，在適當的情況下插入'tbody'，'thead'和'tfoot'元素是值得的，這只是爲了使JavaScript操作和CSS表示更加可預測和一致。 – 2012-07-05 14:29:37

例如，jquery選擇器將完美地與這個結構一起工作。 CSS將完美應用。 – Daniel 2012-07-05 14:32:04

HTML表格中的花式邊框

回答

相關問題