border on simple tables

[michaelriester]

Hello, it´s not possible to create tables completely without border.. By testing the code in a simple html file with the same browser i could verify there are no borders visible on the table and the cells. but entering the code in the dynamic text box it always shows me borders.. What is wrong in my code or in the settings of the dynamic text panel?

CSS:

<style>
    .dot_iO {
      height: 45px;
      width: 45px;
      background-color: #33FF77;
      border-radius: 50%;
      border: 4px solid black;
      display: inline-block;
    }

    .dot_niO {
      height: 45px;
      width: 45px;
      background-color: #E62600;
      border-radius: 50%;
      border: 4px solid black;
      display: inline-block;
    }
  </style>

HTML:

<table>
  <tbody>
    <tr>
      <td style="width: 10%;" colspan="10" class="header">SPC (last 10 samples)</td>
    </tr>
    <tr>
      <td style="width: 10%;"><span class="dot_niO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
    </tr>
    <tr>
      <td style="text-align: left;" colspan="5">last</td>
      <td style="text-align: right;" colspan="5">10th</td>
    </tr>
    <tr>
      <td style="width: 10%;" colspan="5" class="down">Control interval: every 50 pcs</td>
      <td style="text-align: right;" colspan="5"></td>
    </tr>
  </tbody>
</table>

[pjJedi]

Hi.

What I did was use these styles in my CSS Styles:

table{ border-style: unset; }

tr td { border-style: unset }

If it still won't unset you can use !important

[michaelriester]

Thank you very much.. Now it´s working.. The !important property with your CSS style above did finally work.. Great - thanks..

[mikhail-vl]

@pederjohnJedi Thank you for providing the solution.

I will include in the plugin documentation how to override default table styles:

table {
border-style: unset !important;
}

tr td {
border-style: unset !important;
}