htmlcsshtml-tableborder

How to hide the border for specified rows of a table?


I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.


Solution

  • Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.

    In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.

    Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.

    table, tr, td {
      border: 3px solid red;
    }
    tr.noBorder td {
      border: 0;
    }
    <table>
      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
      </tr>
      <tr class="noBorder">
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
      </tr>
      <tr>
        <td>A3</td>
        <td>A3</td>
        <td>A3</td>
      </tr>
    </table>

    Here's the output as an image:

    Output from HTML