Support tables in cards

[Studio384]

With Bootstrap 3, I used to quiet often put tables in panels as shown in the v3 documentation (without the panel-body class). However, in the v4-replacement for panels - cards - doing so does not give the expected result. The table heading still has a line on top and at the bottom, there is a white margin between the table's end and card's end.

[mdo]

I really don't want to get into supporting tables in cards—it's such a shitshow and leads to so much extra CSS for such little gain. Take a look at the panels in v3 for an example of what I mean. So many edge cases, > selectors, etc.

For now, going to punt.

[heruan]

I'd love to have a seamless design for tables in cards. I know tables are too often misused and abused in cases where a list would suffice and I understand the downside of extra CSS—BUT in my opinion the gain isn't that little: appropriate tables are an important semantic element and cards are so practical in v4 I think the combination of them would be a great feature.

[sebastiaanluca]

Placing the table directly in the card div seems to produce an acceptable result. Though that's only my first impression.

<div class="card">
    <!--<div class="card-block">-->
        
        <table class="table table-hover">
            ...
        </table>
    
    <!--</div>-->
</div>

[browner12]

i've been putting them in there, and simply adding mb-0 to the table, and that works well enough.

[fulldecent]

In alpha 6, tables look OK in a card. To make it work I need to first remove the header row.

[thebobhudgins]

Just put .table inside .card
then put .mb-0 with .table
and put .border-0 with .card

<div class="card border-0">
    <!--<div class="card-block">-->
        
        <table class="table table-bordered mb-0">
            ...
        </table>
    
    <!--</div>-->
</div>

[stevenjamesfrank]

Can someone confirm that status of this (specifically, use of tables inside cards)?

I would term the status as "you can do it but it's not pretty or fully functioned". and I'm good with that, I just want to make sure I understand the state of affairs (v4-beta) and whether or not I should expect more.

Additionally, my plan is to use the grid (.row and .col) inside my cards for tabular data, is that the officially preferred way to do this?

[jlozoya]

In bootstrap 4.0.0-alpha.6 table-responsive was working fine, so I copy the css of table-responsive of that version then I put it in my project and update bootstrap to 4.0.0-beta

.app-table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.app-table-responsive.table-bordered {
  border: 0;
}

<div class='card'>
  <div class="card-body">
    <div class="app-table-responsive">
      <table class="table table-hover">
      ...
      </table>
    </div>
  </div>
</div>

[codigoestudio]

<div class="card-body" style="padding: 0;">
;)

[stevebauman]

There's a padding helper class you can use for this that's included in bootstrap named p-0 (for padding: none).

If you apply it to the card-body, then it mirrors the functionality of Bootstrap 3 (at least in my experience):

<div class='card'>
  <div class="card-body p-0"> <!-- Here -->
    <div class="table-responsive">
      <table class="table table-hover">
      ...
      </table>
    </div>
  </div>
</div>

[fulldecent]

The recommendation from @stevebauman did not work for me:

[kjdion84]

This following works.

HTML:

<div class="card">
    <div class="card-header">Category</div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <tbody>
            <tr>
                <td class="align-middle">Content</td>
                <td class="align-middle">Content</td>
                <td class="align-middle">Content</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

Optional CSS to remove top border from first td:

.card-body .table tr:first-child td {
    border-top: 0;
}

[swrobel]

Here's an open PR for this feature: #25193

Out of curiosity, why do tables have margin-bottom? It seems like it's been in the source forever, so I guess that's how it's always been, and it can't be changed, yada yada, but it still makes me morbidly curious...

[philipnewcomer]

Until support is added natively in Bootstrap 4, I've published an NPM package containing CSS to properly render tables inside of cards: https://www.npmjs.com/package/bootstrap4-card-tables

[cbranje]

I don't understand the issue? I put tables in card all the time. Am I missing something?

[jlozoya]

@cbranje Was an issue about a specific problem with the responsive tables on a old version of bootstrap if I remember the 4 alpha version

[krisleech]

I need to add p-0 to the .card-body:

<div class="card">
  <div class="card-header">Not invoiced</div>
  <div class="card-body p-0">
    <table class="table">

[dangquochoi2007]

@krisleech
Thanks . It's working

[othyn]

This style looks perfect to me:

...
<div class="card">
    <div class="card-header border-0">
        My Card Header
    </div>
    <table class="table table-hover mb-0">
    ...

[florianlacreuse]

Guys, the tricky part is to make it look good with .table-bordered on the table while keeping the borders from the card itself. Need to deal with rowspan and colspan too.

[rebecca-xie-au]

Guys, the tricky part is to make it look good with .table-bordered on the table while keeping the borders from the card itself. Need to deal with rowspan and colspan too.

that's true, rowspan or colspan will affect tr:first-child selector