如何应用自定义CSS样式到来自后端代码

Question

我使用了一个表（举）看起来像一个表：

在

“静态”页表，它正在罚款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>

Answer 1

你可以用这样的外部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>