Pancreatico Pancreatico - 1 month ago 10
CSS Question

how to disapear specific td borders

I know this was answared before, in this post, but I've been trying to apply that to my code and I don't know what is wrong.

This is what I'm trying to get: IWantThis

This is what I have:

html:

<table border="1">
<thead></thead>
<tbody>
<tr><td>ye</td><td>ye</td><td>ye</td></tr>
<tr><td>ye</td><td>ye</td><td>ye</td></tr>
<tr class="noborders"><td>no</td><td>no</td><td>no</td></tr>
</tbody>
</table>


css:

table{
border-collapse: collapse;
}
.noborders > td{
border: none;
}


this is what I've gotten with that code:
wrongtable

I tryed with
table{border-bottom:0}
in css part, this almost works and I could see what is wrong is the entire table border that can't be removed from the third row when I use
border: none
on third row td's.

Thank you all for your time.

Answer

just change your css for .noborders > td by this

.noborders > td{
       border-color: transparent;
    border-bottom-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
}

the whole will be like

table{
    border-collapse: collapse;
}
.noborders > td{
       border-color: transparent;
    border-bottom-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
}
<table border="1">
    <thead></thead>
    <tbody>
        <tr><td>ye</td><td>ye</td><td>ye</td></tr>
        <tr><td>ye</td><td>ye</td><td>ye</td></tr>
        <tr class="noborders"><td>no</td><td>no</td><td>no</td></tr>
    </tbody>
</table>