2011-06-30 106 views
1

我有幾個包含表格的網頁,爲此我希望在表格和單元格周圍有行邊框。實際上,這些網頁中的一些已經存在好幾年了,並且在IE6,IE7中可以接​​受。無法獲取表格邊框/單元格周圍的線條

我們在6個月前切換到完全不同的一組樣式表來改變我們的網站外觀和感覺。我們還切換到了IE8等「現代」瀏覽器(因爲我無法停止Vista)。

現在邊框根本不渲染。

大約一個月前,我花了一天的時間與此戰鬥,但未能解決。我似乎可以將頁面縮小到最近的表格,而IE8仍然不會呈現邊框。我想我決定IE8只是越野車,但我不是一個HTML專家,所以它更可能是我的馬車。 (我只是回到這個,我會去看看我是否能找到縮小的頁面)。

這裏就是這樣的一個頁面:

http://www.semdesigns.com/products/DMS/DMSComparison.html 

的表應該是顯而易見的;你可以通過他們缺少的行來告訴他們: - {

URI使用W3C服務驗證爲HTML 4.01 Transitional。

有什麼建議嗎?

編輯:海報都指出,新的樣式表將默認邊框設置爲0.糟糕!

回答

2

你的新樣式出現使用復位值,即它設置許多不同元件以border:0(包括表)。您需要專門設置表格和單元格的邊框。

要設置表格的邊框,只需使用table.box {border:1px solid #000}。但是,如果您在表和單元格的所有邊上設置邊框,則邊框的厚度將是您需要的兩倍。

因此,我使用以下技巧來設置外部表格的頂部和右側邊框以及表格單元格的底部和左側。這使得整個表格內容出現了一個平坦的邊界。

table.box { 
    border-top: 1px solid #000; 
    border-right: 1px solid #000; 
} 

table.box td { 
    border-bottom: 1px solid #000; 
    border-left: 1px solid #000; 
} 

但是我注意到你的box表中有一些空單元,所以你需要刪除這些以防止雙重邊框。

+0

三個很好的答案;很難選擇最好的。你有一些更好的建議。 –

3

從我能看到你有邊界:0;在桌子的造型中。

這將隱藏表格的邊界。

+0

如果是這樣的話,我會非常感激有人叫我愚蠢的,因爲它很簡單: - 我明天會在工作中檢查出來。非常感謝您看到我以前沒有看到的東西。 –

+0

是的,我是愚蠢的,問題解決了! –

2

我在Firefox中看不到任何邊框。

  1. SDstyle.css,第16行你CSS重置這臺border: 0;爲標籤的大名單,其中包括tabletdtrth ...

  2. 你聲明你的表像<table class="box">,但同時你的CSS文件中沒有定義這樣的樣式。

+0

class =「box」是嘗試控制表格樣式的痕跡。如果我在box的定義中定義了一個邊框大小,大概會解決這個問題? –

+0

@Ira對於以這種方式定義的表 - 是的(我已經看到3個檢查表中只有1個具有'class =「box」'),但是您可能需要在這些定義中添加'!important' 'table.box {border:1px solid#4C4B4B!important;}')。 – LazyOne

+0

似乎並不需要「!重要」;究竟是怎麼做的(爲什麼其他的東西不重要)? –