從tbody和borderad底部的邊界頂部不同時工作？

我有一個非常基本的表：從tbody和borderad底部的邊界頂部不同時工作？

<table id="ttable5" class="table-default"> 
     <thead> 
     <tr> 
      <th>Nombre</th> 
       <th class="sort-date">Provincia</th> 
      <th class="sort-digit">Municipio</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 

      <td class="tablaprim">1VESTIBULUM TORTOR NISL </td> 
      <td>Sevilla</td> 
      <td>Castilleja de la Cuesta</td> 
     </tr> 
     <tr> 

      <td class="tablaprim">4VESTIBULUM TORTOR NISL </td> 
      <td>Sevilla</td> 
      <td>Castilleja de la Cuesta</td> 
     </tr> 
    </tbody> 
</table>

我需要這樣的：

------------ 
head 
------------1px border #fff 
------------3px border #gray 
body 
------------

我只能得到展現邊界之一，無法在兩個在同一時間。這並不重要，但我很好奇導致此問題的原因。

我的CSS：

thead{border-bottom: 1px solid #fff;} 
tbody{border-top: 3px solid #4d4d4d;}

編輯：

因爲它看起來像邊境崩潰可能是問題，但我不能讓它工作，我已經建立了這個沙箱：

http://jsfiddle.net/bRVEu/

那裏你可以看到這裏只有一個灰色的邊框，應該有一個1px的白色邊框右側在它的上面

來源

2011-06-07 Elaine Marley

你的背景不是白色的嗎？ :) – Jad 2011-06-07 12:40:39

不，我的背景在頭上是綠色的，在身體上是淺灰色的：D – 2011-06-07 14:01:47

爲了這個工作，你需要

一）使用的table

都 border-collapse和 border-spacing

B）設置在最內部邊界元素

c）您必須在table上設置border-collapse和border-spacing，因此它繼承

所以

table {background:pink; 
    border:0; 
    border-collapse:separate; 
    border-spacing:0 5px;} 

thead tr th{border-bottom: 1px solid red; 
    border-collapse:separate; 
    border-spacing:5px 5px;} 

tbody tr#first td{border-top: 3px solid #4d4d4d; 
    border-collapse:separate; 
    border-spacing:5px 5px;}

我改變了一些顏色，使其更容易看到。

http://jsfiddle.net/jasongennaro/Pf7My/1/

來源

2011-06-07 14:58:50

'border-spacing'只能應用於整個表格，而不是元素。 – Sandman4 2012-10-31 14:20:26

檢查值border-collapse。如果它是collapse，那麼瀏覽器將合併相鄰的邊界。

來源

2011-06-07 12:27:57

它實際上只是消除了這並沒有改變我的老闆和老闆的行爲方式：S事實上沒有它，我提到的邊界我的問題不顯示（都不） – 2011-06-07 14:04:37

嘗試在其中一個上使用填充或邊距來模擬邊框。 – 2011-06-07 14:26:03

我已經試過，但它不起作用（沒有填充或保證金應用）。我編輯了我的帖子，並指向了一個沙盒，也許你可以在那裏看到它。 – 2011-06-07 14:45:52

通過border-collapse可能會將邊界「合併」。嘗試在tbody和thead上設置border-collapse: seperate;

來源

2011-06-07 12:31:37

我試過了，但仍然只有一個邊框會佔上風（較大的一個） – 2011-06-07 14:00:57

嘗試在tbody和thead上設置border-collapse: separate;。不是「獨立」

來源

2011-06-07 14:07:32 Matop79

是的，我注意到錯字，也沒有工作：D – 2011-06-07 14:11:51

我認爲這是更好，如果我們把它的電池元件:)

.table-default { 
    border-collapse: separate; //DON'T FORGET TO MAKE IT SEPARATE 
    border-spacing: 0; 
}  
.table-default th { 
    border-bottom: gray solid 3px; 
} 
.table-default td { 
    border-top: white solid 1px; 
}

來源

2011-06-07 15:24:49

從tbody和borderad底部的邊界頂部不同時工作？

回答

相關問題