Separate last row from table

Question

Is it possible to separate the last row from a table? I read up on border-collapse and border-spacing. These will affect all the table elements. I am trying to only separate the last row of a table.

For illustration purposes:

<table>
    <tbody>
        <tr></tr>
        <tr></tr>
    </tbody>
    <tfoot>
        <tr></tr>
    </tfoot>
</table>

In the given example above, I've also tried to separate tfoot by overwriting its display to the table. But when it resulted more damage to the outlook I would like to achieve. Is there any CSS tricks I am able to use?

Note*

ive tried all possible trick, the idea is separating tfoot from tbody.Requirement is tfood has a background of green, tbody has a background color of blue. when seperated , it should display a white blank between these two tags. Ive implemented padding like most said but it doesnt do the trick. Any Idea?

Question is solved

Basically , what i did was to include a dummy row and hide its border.

Could you add a small wireframe of what you are trying to achieve? — Titulum, Jan 17 '20 at 08:06
related: https://stackoverflow.com/questions/4645406/how-to-separate-two-trs-in-an-html-table — A. Meshu, Jan 17 '20 at 08:16

score 1 · Answer 1 · answered Jan 17 '20 at 08:07

1

If by separate you simply mean to create some space between the rows, one trick is to give the cells in the tfoot some transparent border at the top.

tfoot tr:first-child td {
  border-top: 1em solid transparent;
}

<table>
  <tbody>
    <tr>
      <td>data 1</td>
    </tr>
    <tr>
      <td>data 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>footer</td>
    </tr>
  </tfoot>
</table>

answered Jan 17 '20 at 08:07

Mr Lister

45,515
15
108
150

Thanks but it still does not do the trick. Ive tried this solution before. when background color is added . It still does show a white row – Jan 17 '20 at 09:09
@user12521913 Then I think you should add some more information to the question. What exactly are you looking for and what have you tried that doesn't work? I mean, do you want the table to look like it's in two pieces, with the background color of the body showing between the tbody and the foot, rather than the background color of the table? Details like that are important. – Mr Lister Jan 17 '20 at 10:36
Thanks for the advice, ill work on being informative with my question in the future.What you said is correct, I am trying to achive the table to look like its in two places and I have already came up for the solution by adding a dummy row and replacing its background and color to none. It does the trick but I am not sure if this is the right approach. – Jan 19 '20 at 07:18

score 0 · Answer 2 · answered Jan 17 '20 at 08:11

Another approach is to add padding to tfoot's td:

tfoot tr td {padding-top: 100px;}

<table>
    <tbody>
        <tr><td>BLA</td><td>BLA</td><td>BLA</td><td>BLA</td></tr>
        <tr><td>YADA</td><td>YADA</td><td>YADA</td><td>YADA</td></tr>
    </tbody>
    <tfoot>
        <tr><td>LOOK AT ME</td><td>LOOK AT ME</td><td>LOOK AT ME</td></tr>
    </tfoot>
</table>

score 0 · Answer 3 · answered Jan 17 '20 at 08:14

One way could be to have a "gap" row without cells:

<table>
    <tbody>
        <tr><td>A</td><td>B</td></tr>
        <tr><td>C</td><td>D</td></tr>
    </tbody>
    <tfoot>
        <tr class="gap"></tr>
        <tr><td>1</td><td>2</td></tr>
    </tfoot>
</table>

td { 
    border: 1px solid black;
}

tr.gap {
    height: 1em;
}

Twinkle Sharma · Answer 4 · 2020-02-18T12:18:50.863

0

To separate the last td of the table you can give padding to last-child of tr's td. Hope this helps.

table tfoot tr:last-child td{ padding-top:10px;}

<table>
  <tbody>
    <tr>
      <td>first</td>
    </tr>
    <tr>
      <td>second</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>last</td>
    </tr>
  </tfoot>
</table>

edited Feb 18 '20 at 12:18

answered Jan 17 '20 at 08:21

Twinkle Sharma

365
2
9

Titulum · Answer 5 · 2020-01-17T10:06:38.523

-1

If it is the last <tr> element that you want to target with css, you can do as follows:

<table id="my-table">
    <tbody>
        <tr></tr>
        <tr></tr>
    </tbody>
    <tfoot>
        <tr></tr>
    </tfoot>
</table>

#my-table tbody tr:last-child {
  border-top: 5px solid transparent;
}

If it is the <tr> element in the tfoot element that you want to target:

#my-table tfoot tr {
  border-top: 5px solid transparent;
}

edited Jan 17 '20 at 10:06

answered Jan 17 '20 at 08:08

Titulum

9,928
11
41
79

I don't think the question is about how to select the last row, but how to separate it from the rest of the table. – RoToRa Jan 17 '20 at 08:15
@RoToRa, you will need to select the element to be separate it from the rest using `css`, no? I've updated my answer to include a `css` rule that will separate it. – Titulum Jan 17 '20 at 08:23
Margin doesn't apply to table rows. – RoToRa Jan 17 '20 at 09:37
Whoops, I replaced it with `border-top: 5px solid transparent;` – Titulum Jan 17 '20 at 10:06

Separate last row from table

5 Answers5