html - 如何将自定义 css 样式应用于来自后端代码的表格

Question

我使用了一个表(在 bootstrap 中)，它看起来像:

在 "Static" 页表中，它与 td bgcolor 等一起工作良好。但在“动态”页表中，它来自“文本编辑器”，因此表设计不起作用，因为我们无法为每个 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>