-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support tables in cards #17395
Comments
Class name is non-finalized. twbs#17395.
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, For now, going to punt. |
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. |
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> |
i've been putting them in there, and simply adding |
In alpha 6, tables look OK in a card. To make it work I need to first remove the header row. |
Just put .table inside .card
|
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? |
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
|
|
There's a padding helper class you can use for this that's included in bootstrap named If you apply it to the <div class='card'>
<div class="card-body p-0"> <!-- Here -->
<div class="table-responsive">
<table class="table table-hover">
...
</table>
</div>
</div>
</div> |
The recommendation from @stevebauman did not work for me: |
This following works. HTML:
Optional CSS to remove top border from first
|
Here's an open PR for this feature: #25193 Out of curiosity, why do tables have |
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 |
I don't understand the issue? I put tables in card all the time. Am I missing something? |
@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 |
I need to add <div class="card">
<div class="card-header">Not invoiced</div>
<div class="card-body p-0">
<table class="table"> |
@krisleech |
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">
... |
Guys, the tricky part is to make it look good with |
that's true, rowspan or colspan will affect tr:first-child selector |
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.
The text was updated successfully, but these errors were encountered: