2015-06-18 92 views
2

我想使單元格d具有全黃色背景如何用padding顏色重寫html td?

我該怎麼做?

我在Outlook展示中定位html。

http://jsfiddle.net/f2pb227a/

更新1:實際上,我使用的靈活性HTML包在運行時改變小區d和表已經很好格式化,因爲某些原因,我只希望改變細胞d在最後一步,因此,我想用div來插入黃色的bg而不用改變它的父級td類。

最終的解決方案:https://jsfiddle.net/0khjqdh0/

<table class="XXX" > 
    <tr class="header"> 
     <td>Col 1</td> 
     <td>Col 2</td> 
    </tr> 
    <tr class="d1"> 
     <td>a</td> 
     <td>b</td> 
    </tr> 
    <tr class="d0"> 
     <td>c 
     </td> 
     <td> 
      <div class="special_class"> d </div> 
     </td> 
    </tr> 
</table> 



.XXX table{ 
    border:0px; 
    border-collapse:collapse; 
    padding:0px; 
} 

.XXX tr.header td { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 10.0pt; 
    font-weight: bold; 
    border:1px solid #C0C0C0; 
    color:#FFFFFF; 
    background-color:#4F81BD; 
    border-collapse:collapse; 
    padding:5px; 
} 
.XXX tr.d0 td { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 10.0pt; 
    background-color:#E1EEF4; 
    border:1px solid #C0C0C0; 
    padding:5px; 
    white-space:nowrap; 
} 

.XXX tr.d1 td { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 10.0pt; 
    background-color:#FFFFFF; 
    border:1px solid #C0C0C0; 
    padding:5px; 
    white-space:nowrap; 
} 

.XXX div.special_class { 
background-color:yellow; 
} 

回答

0

嘗試應用background-color:yellow;於母公司的TD或TD手機中移除填充並給予填充,以孩子的div

+0

實際上它不起作用,因爲它只會添加更多的填充。不管怎麼說,還是要謝謝你。 https://jsfiddle.net/f2pb227a/3/ – DayDayHappy

1

你可以把類的細胞:

<td class="special_class"> 
    <div> d </div> 
</td> 

然後在單元格上設置樣式並使其具有足夠的特定性來覆蓋現有的樣式:

.XXX tr.d0 td.special_class { 
    background-color:yellow; 
} 

演示:http://jsfiddle.net/f2pb227a/1/

+0

謝謝。但我無法改變它的td課程的父母。任何使用div的機會? – DayDayHappy

+0

但您的答案必須對其他可以更改的人有所幫助​​ – DayDayHappy

+0

@DayDayHappy:然後您需要刪除單元格上的填充,並將所有單元格中的元素添加到可以添加填充的元素中。當單元格沒有填充時,它們內部的div可以填充單元格。 – Guffa

0

你只需要給類不給td的子元素,但要精確td要改變誰的背景色:

<td class="special_class">