0

Having read this Stack Overflow question - which (don't get me wrong) works. But I can't seem to find a way of editing it for my requirements.

Currently, the JSFiddle gives:

 Heading | Heading
---------+---------
 Row     | Row
---------+---------
 Row     | Row
---------+---------
 Row     | Row

How can i edit this to being:

 Heading | Heading
---------+---------
 Row     | Row
 Row     | Row
 Row     | Row

Instead?

I've tried quite a few combinations, but can never seem to get it to work! :(


I've also noticed that the accepted answer is +5 years old. Would it still be the 'better'/'best' solution?


BTW i'm not great at css (actually, i'm beyond terrible), and so would appreciate your help (after all, I ended up with this - completely wrong!).

1
  • 1
    I may be wrong, but you are after something like this?
    – chriz
    Nov 7, 2014 at 10:52

3 Answers 3

1

Remove your table tr:last-child td group (since it'll be redundant) and add styles to remove any top or bottom border from your <td>s.

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid black;
}
table tr:first-child th {
    border-top: 0;
}

/* ---- This change --------- */
table tr td {
    border-bottom: 0;
    border-top:0;
}
/* ------------- */

table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

4
  • would there be a way of setting it to only this specific table (other tables might have different styling) i.e. making it have a unique class ?
    – jbutler483
    Nov 7, 2014 at 10:57
  • 1
    Of course, if your table has a targetable attribute, for example an id: #myTable tr td{ }.
    – George
    Nov 7, 2014 at 10:58
  • so that's remove the word table and replace it with #myTablesID?
    – jbutler483
    Nov 7, 2014 at 11:01
  • Either that or table#MyTable but since ids need to be unique document-wide, there is no need.
    – George
    Nov 7, 2014 at 11:04
0

check this fiddle : fiddle

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td class="inner">Cell (1,1)</td>
        <td class="inner">Cell (1,2)</td>
    </tr>
    <tr>
        <td class="inner">Cell (2,1)</td>
        <td class="inner">Cell (2,2)</td>
    </tr>
    <tr>
        <td class="inner">Cell (3,1)</td>
        <td class="inner">Cell (3,2)</td>
    </tr>
</table>

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid black;
}
table tr:first-child th {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}

.inner {
    border-bottom:1px white solid;
}
0

Just do this in your css with your th, so it will add bottom border to your th.

table tr th{
    border:0px solid transparent;
    border-bottom-width:1px;
    border-bottom-color:black;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.