2011-09-27 79 views
0

我不知道爲什麼,但我似乎無法在我的腳本中設計td元素。我試圖從表格字幕中刪除所有td元素的邊框,並且我猜我的css在某種程度上是錯誤的。不能設計td元素

PS:我只能通過內聯CSS刪除邊框。

HTML:

<table> 
    <thead> 
     <tr> 
      <th width="100%" colspan="5">My Recent Activity</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="table-subtitles"> 
      <td style="border: 0"><h4>Date</h4></td> 
      <td><h4>Description</h4></td> 
      <td><h4>Amount</h4></td> 
      <td><h4>Due</h4></td> 
      <td><h4>Status</h4></td> 
     </tr> 
     <?php foreach($this->payments as $payment): ?> 
     <tr> 
     </tr> 
     <?php endforeach; ?>   
     <?php 
      if ((count($this->payments)==0)) : 
     ?>  
      <tr> 
      <td style="border: 0; text-align: center" colspan="6" class="info">No payments made yet</td> 
      </tr> 
     <?php endif; ?>  
    </tbody> 
</table> 

CSS:

#payments-content { width: 480px; float: left; margin-right: 20px; } 
#payments-sidebar { width: 270px; float: left; } 

.ui-button-large .ui-button-large-text { font-size: 20px; width: 270px; } 

// new tables design 
.table-subtitles td{ border-bottom: 0 !important; } 
+0

嘗試使用螢火蟲或鉻檢查器查看td上的樣式級聯。它可能被替換爲更優先的其他規則 – Einacio

+0

您能提供一個完整的,自給自足的代碼示例,可以在jsfiddle.net中進行測試嗎? – mellamokb

+0

我剛發佈了完整的css文件 – aporat

回答

0

你嘗試border-bottom:0!important

+0

不行,依然不起作用。奇怪。它看起來像一個非常簡單的CSS問題,我似乎無法找到答案。我認爲這是選擇或主佈局 – aporat

-4

你的問題是你的選擇。

.table-subtitles td表示:元素內的TD元素帶有「table-subtitles」類。 你需要的是:

td.table-subtitles { border-bottom:0; }

+0

.table-subtitles是tr – Einacio

+0

確切地說,這就是他在做什麼,他的選擇的罰款。 – Primus202

+0

你是對的,我的壞 – Deleteman

1

你可能會發現要交朋友border-collapseth

+0

謝謝,我會谷歌一點。我不喜歡我們現在使用的邊框造型方法 – aporat

1

當我把這張表放到一個測試HTML文件中時,我默認沒有邊框。因此,這可能是一個繼承問題,你有一些以前的表格樣式,或者從你的CSS導入。通常情況下,解決這些問題的方式是通過繼承我在CSS中創建更具體的選擇器的任何樣式。因此,例如,給你的表中的ID和你的CSS樣式是:

#mytable .table-subtitles td { border-bottom: 0; } 

另一個偉大的方式,看看到底發生了什麼事是使用Firebug在Firefox或Chrome檢查看看你的錶行選擇什麼風格繼承或被覆蓋。