如何應用自定義CSS樣式到來自後端代碼

在

「靜態」頁表，它正在罰款td bgcolor等但在「Dynamic」頁表來自「文本編輯器」，所以表格設計不起作用，因爲我們無法編輯每個td的bgcolor。我的問題是：「如何申請這種類型的設計成一臺帶有CSS」

我的代碼：

.txt-red { 
 
    color: #fd5400 !important; 
 
} 
 
.table-light table td { 
 
    border: 1px solid rgba(80, 80, 80, 0.66); 
 
    padding: 8px 8px; 
 
} 
 
.col-black { 
 
    padding: 30px 50px; 
 
    background: #fff; 
 
    color: #cdcdcd; 
 
}

<div class="col-black"> 
 
<div class="table table-responsive table-light"> 
 
    
 
<table width="100%" cellspacing="0" cellpadding="0"> 
 
<tbody> 
 
<tr class="txt-red"> 
 
<td bgcolor="#000000">Week</td> 
 
<td bgcolor="#000000">2:30 pm - 1:30 pm</td> 
 
<td bgcolor="#000000">2:30 pm - 1:30 pm</td> 
 
<td bgcolor="#000000">2:30 pm - 1:30 pm</td> 
 
<td bgcolor="#000000">2:30 pm - 1:30 pm</td> 
 
</tr> 
 
<tr> 
 
<td bgcolor="#333333">Sunday</td> 
 
<td bgcolor="#333333">Lorem Ipsum is simply</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
</tr> 
 
<tr> 
 
<td bgcolor="#1c1c1c">Monday</td> 
 
<td bgcolor="#1c1c1c">Lorem Ipsum is simply</td> 
 
<td bgcolor="#1c1c1c">Lorem Ipsum</td> 
 
<td bgcolor="#1c1c1c">Lorem Ipsum</td> 
 
<td bgcolor="#1c1c1c">Lorem Ipsum</td> 
 
</tr> 
 
<tr> 
 
<td bgcolor="#333333">Tuesday</td> 
 
<td bgcolor="#333333">Lorem Ipsum is simply</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
</tr> 
 
<tr> 
 
<td bgcolor="#1C1C1C">Tuesday</td> 
 
<td bgcolor="#1C1C1C">Lorem Ipsum is simply</td> 
 
<td bgcolor="#1C1C1C">Lorem Ipsum</td> 
 
<td bgcolor="#1C1C1C">Lorem Ipsum</td> 
 
<td bgcolor="#1C1C1C">Lorem Ipsum</td> 
 
</tr> 
 
<tr> 
 
<td bgcolor="#333333">Tuesday</td> 
 
<td bgcolor="#333333">Lorem Ipsum is simply</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
</tr> 
 
<tr> 
 
<td bgcolor="#1C1C1C">Tuesday</td> 
 
<td bgcolor="#1C1C1C">Lorem Ipsum is simply</td> 
 
<td bgcolor="#1C1C1C">Lorem Ipsum</td> 
 
<td bgcolor="#1C1C1C">Lorem Ipsum</td> 
 
<td bgcolor="#1C1C1C">Lorem Ipsum</td> 
 
</tr> 
 
<tr> 
 
<td bgcolor="#333333">Tuesday</td> 
 
<td bgcolor="#333333">Lorem Ipsum is simply</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
<td bgcolor="#333333">Lorem Ipsum</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div></div>

來源

2017-01-20 Vishnu

在你生成表的後端代碼中添加css類併爲這些類編寫css規則？ – Siddharth

不，添加的代碼僅用於靜態html頁面....我需要與外部CSS相同的樣式。只有表格來自支持。 – Vishnu

你可以用這樣的外部CSS創建表...

.col-black { 
 
    padding: 30px 50px; 
 
    background: #fff; 
 
    color: #cdcdcd; 
 
} 
 
.table-light table td { 
 
    border: 1px solid rgba(80, 80, 80, 0.66); 
 
    padding: 8px 8px; 
 
} 
 
table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 
table tbody tr:first-child td { 
 
    color: #fd5400; 
 
} 
 
table tbody tr:nth-child(odd) td { 
 
    background-color: #1c1c1c; 
 
} 
 
table tbody tr:nth-child(even) td { 
 
    background-color: #333; 
 
}

<div class="col-black"> 
 
    <div class="table table-responsive table-light"> 
 

 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <td>Week</td> 
 
      <td>2:30 pm - 1:30 pm</td> 
 
      <td>2:30 pm - 1:30 pm</td> 
 
      <td>2:30 pm - 1:30 pm</td> 
 
      <td>2:30 pm - 1:30 pm</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sunday</td> 
 
      <td>Lorem Ipsum is simply</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Monday</td> 
 
      <td>Lorem Ipsum is simply</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Monday</td> 
 
      <td>Lorem Ipsum is simply</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Monday</td> 
 
      <td>Lorem Ipsum is simply</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Monday</td> 
 
      <td>Lorem Ipsum is simply</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Monday</td> 
 
      <td>Lorem Ipsum is simply</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Monday</td> 
 
      <td>Lorem Ipsum is simply</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
      <td>Lorem Ipsum</td> 
 
     </tr> 
 

 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

來源

2017-01-20 12:36:42 sol

謝謝@ovokuro ....很棒...... – Vishnu

如何應用自定義CSS樣式到來自後端代碼

回答

相關問題