title: How can apply custom css style to a table that comes from backend code
body: <p>I have used a table (in bootstrap) that look like:
  <a href="https://i.stack.imgur.com/6EcSY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6EcSY.jpg" alt="enter image description here"></a></p>
  
  <p>in <strong>"Static"</strong> page table it is working fine with <em>td bgcolor</em> etc.
  But in <strong>"Dynamic"</strong> page table its coming from "Text editor", so that the table design is not working because we can't edit the bgcolor for each td. My question is: <strong>"How can apply this type of design into a table with CSS"</strong></p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-black"&gt;
  &lt;div class="table table-responsive table-light"&gt;
    
  &lt;table width="100%" cellspacing="0" cellpadding="0"&gt;
  &lt;tbody&gt;
  &lt;tr class="txt-red"&gt;
  &lt;td bgcolor="#000000"&gt;Week&lt;/td&gt;
  &lt;td bgcolor="#000000"&gt;2:30 pm - 1:30 pm&lt;/td&gt;
  &lt;td bgcolor="#000000"&gt;2:30 pm - 1:30 pm&lt;/td&gt;
  &lt;td bgcolor="#000000"&gt;2:30 pm - 1:30 pm&lt;/td&gt;
  &lt;td bgcolor="#000000"&gt;2:30 pm - 1:30 pm&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td bgcolor="#333333"&gt;Sunday&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum is simply&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td bgcolor="#1c1c1c"&gt;Monday&lt;/td&gt;
  &lt;td bgcolor="#1c1c1c"&gt;Lorem Ipsum is simply&lt;/td&gt;
  &lt;td bgcolor="#1c1c1c"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#1c1c1c"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#1c1c1c"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td bgcolor="#333333"&gt;Tuesday&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum is simply&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td bgcolor="#1C1C1C"&gt;Tuesday&lt;/td&gt;
  &lt;td bgcolor="#1C1C1C"&gt;Lorem Ipsum is simply&lt;/td&gt;
  &lt;td bgcolor="#1C1C1C"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#1C1C1C"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#1C1C1C"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td bgcolor="#333333"&gt;Tuesday&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum is simply&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td bgcolor="#1C1C1C"&gt;Tuesday&lt;/td&gt;
  &lt;td bgcolor="#1C1C1C"&gt;Lorem Ipsum is simply&lt;/td&gt;
  &lt;td bgcolor="#1C1C1C"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#1C1C1C"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#1C1C1C"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td bgcolor="#333333"&gt;Tuesday&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum is simply&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;td bgcolor="#333333"&gt;Lorem Ipsum&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>