Card tables

[MartijnCuppens]

Fixes #25057
Demo: https://deploy-preview-25193--twbs-bootstrap4.netlify.com/docs/4.1/components/card/#tables

[ysds]

This feature will break a table including merged (rowspan) cells. Probably there is no reasonable way to solve this. Are you sure you want to add this?

<table class="table table-bordered">
  <thead>
    <tr><th>Name</th><th>Data</th></tr>
  </thead>
  <tbody>
    <tr><td rowspan="3">Name 01</td><td>001</td></tr>
    <tr><td>002</td></tr>
    <tr><td>003</td></tr>
    <tr><td rowspan="3">Name 02</td><td>001</td></tr>
    <tr><td>002</td></tr>
    <tr><td>003</td></tr>
  </tbody>
</table>

[mdo]

Hmm good point @ysds.

[MartijnCuppens]

Hmmm, that case is not fixable with utility-classes either. The only thing I could think of is adding a new class to the fields that are not aligned.

[MartijnCuppens]

@mdo, is it an option to continue with this with a warning about the rowspan problem?

[ysds]

How about adding this as an optional class like .list-group-flush? I think default Bootstrap style should not force the case that causing broken space despite correct HTML markup.

[MartijnCuppens]

@ysds, where would you add this class and what would this exactly do? Can you maybe provide a demo?

[MartijnCuppens]

.not-first-cell and .not-last-cell classes can now be added to prevent unexpected behaviour with rowspans.

https://codepen.io/MartijnCuppens/pen/JMyOgv

[MartijnCuppens]

@ysds & @mdo, what do you think about the latest changes?

[ysds]

I am worried that adding new features (or changing padding/margin) to existing class (.card> .table) will include the possibility of causing breaking changes. Also need to consider the .table-responsive. So I prefer something additional class: e.g. add class (.card-table or .table-card or etc.) to the .table in the .card

[MartijnCuppens]

Good feedback, @ysds! I've now changed the selector to .card-table and added support for .table-responsive.

Also added an example of the responsive table in the demo: https://codepen.io/MartijnCuppens/pen/JMyOgv

Needs review

[royklutman]

When not using a .card-header there seems to be a double top border, when the .card-table is the first child, to me that looks a little off: https://codepen.io/royklutman/pen/bQwdOW (first card). This could be fixed with this:

.card-table {
  &:first-child th {
    border-top: 0;
  }
}

Working example: https://codepen.io/royklutman/pen/jQMPda (first card).

[MartijnCuppens]

@royklutman, good point, but the solution is not that simple, we'll also need to cover these cases:

• If the th is added in the tbody, it should have a top-border (unless there is no thead and the th is the is in the first tr of the tbody)
• The top border from tbody:first-child tr:first-child td should also be removed
• Also support .table-responsive

So in the end we'll end up with this css:

.card > .card-table:first-child > thead:first-child tr:first-child th,
.card > .card-table:first-child > tbody:first-child tr:first-child th,
.card > .card-table:first-child > tbody:first-child tr:first-child td,
.card > .table-responsive:first-child .card-table > thead:first-child tr:first-child th,
.card > .table-responsive:first-child .card-table > tbody:first-child tr:first-child th,
.card > .table-responsive:first-child .card-table > tbody:first-child tr:first-child td {
  border-top: none;
}

I'm not sure if it's worth adding this much CSS for that case, especially when the top border can be removed with utility classes.

[mdo]

@MartijnCuppens Would you be okay with holding off on this until v5 maybe? It looks great overall, but I'm wondering if there's something we can do in the default component padding values to better support these tables without extra CSS.

[MartijnCuppens]

Changing the default paddings would indeed be a better option, I'll remove this from v4.3.

[MartijnCuppens]

Gonna close this, syncing the paddings in v5 would be a better option.

[florianlacreuse]

@MartijnCuppens @mdo Will you reconsider this feature now that Bootstrap 5 is out?