雙虛線邊框，而使用合併單元格

我有什麼似乎是一個簡單的問題，但搜索網還沒有產生任何結果。雙虛線邊框，而使用合併單元格

我有一個表

<table> 
    <tr> 
     <td colspan="3"> 
      <img src="something.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Hello 
     </td> 
     <td> 
      World 
     </td> 
     <td> 
      ! 
     </td> 
    </tr> 
</table>

<tr>的所有元素均具有border-top: dotted 1px black，這工作正常遠離中央<td>元件在第二<tr>。

該元素具有雙邊框等顯示爲實線，去除colspan修復該問題。

我試圖施加border-collapse: collapse到表和這沒有奏效，我已經嘗試添加在 形式的內容的第一<td>而不是圖像內，這已也不工作。

任何想法的人？

來源

2011-10-11 Jake N

是表也有邊界？嘗試將表格邊框設置爲無。 – punit

'沒有邊界，''沒有邊界。 –

您在瀏覽器中看到了哪個瀏覽器？我沒有在運行Firefox 7.0.1的jsfiddle中獲得它：http://jsfiddle.net/yePHg/ – Pat

回答

添加border-collapse: separate;你的表修復該問題，請http://jsfiddle.net/quyMy/

我添加了一個動態的測試用例到那個小提琴。任意位置單擊，和原來的/新表的知名度將切換，讓你看到的差別要容易得多。

擺脫意外邊框的另一種方法是在包含<td colspan=3>的行後面添加一個普通的<tr></tr>。

來源

2011-10-22 14:26:52

還沒有確定的答案Rob W. So，你贏了！ –

這節省了我幾個週期。謝謝！ – Hcabnettek

如果你設置表格單元格，而不是錶行的邊框，它會奏效。

我只能再現IE錯誤，但也有在IE渲染表格邊框的方式與其他已知的問題。

這個顯示：http://jsfiddle.net/yePHg/19/

來源

2011-10-12 22:19:13 Victor

謝謝維克多，我相信我已經嘗試過這個。我會再試一次。 –

嘗試添加這個CSS：

<style> 
table, table * { border:0; padding:0; margin:0 } 
table td { border-top:1px dotted #000 } 
</style>

來源

2011-10-22 11:57:17 bogdanmogo

添加一行與< HR />之間，然後給邊境，人力資源

http://jsfiddle.net/Y5Gec/

來源

2011-10-27 11:28:51 HerrSerker

upvoted開箱可敬的修復。有趣的方法。 – Hcabnettek

嘗試在TR上應用CSS display: block;：

 
    tr 
    { 
     border-top: 1px dotted #000; 
     display: block; 
    }

來源

2011-10-28 06:59:44 ambay

我打這個同樣的問題！

border-collapse: separate

工作得很好，但它也分開我的邊界（令人震驚，對吧？）。我想要一條虛線。所以這就是我所做的。

CSS：

td { 
border-right: 1px dotted #bbb; 
border-left: 1px dotted #bbb; 
border-bottom: 1px dotted #bbb; 
border-top: none; 
padding: .5em; 
} 

th { 
border-right: 1px dotted #bbb; 
border-left: 1px dotted #bbb; 
border-top: 1px dotted #bbb; 
border-top: 1px solid #bbb; 
padding: .5em; 
}

HTML

<table border="1"> 
    <tr> 
     <th colspan="5"> DRESSES &amp; TOPS </th> 
    </tr> 
    <tr> 
     <td> size </td> 
     <td> numerical </td> 
     <td> bust </td> 
     <td> waist </td> 
     <td> hip< </td> 
    </tr> 
</table>

來源

2012-06-13 20:29:30

相關問題