Search code examples
htmlcssborder

Overrule borders from tables in css

I'm trying to remove the border above the 111 column but it isn't working for some reason. Can anyone explain how I can overrule the border-style?

.myBorder {
  border-top-style: solid;
}
<table class="myBorder">
  <tr>
    <td style="border-top-style: none !important;">111</td>
    <td>222</td>
  </tr>
  <tr>
    <td>333</td>
    <td>444</td>
  </tr>
</table>

As you can see I tried it with !important but it isn't working.

Solution

  • You could use border-collapse on the table and then draw a white top-border on the cell

    .myBorder {
  border-top-style: solid;
  border-collapse: collapse;
}
    <table class="myBorder">
  <tr>
    <td style="border-top-style:solid; border-color:white;">111</td>
    <td>222</td>
  </tr>
  <tr>
    <td>333</td>
    <td>444</td>
  </tr>
</table>