https://github.com/philipnewcomer/bootstrap4-card-tables

CSS for properly rendering tables inside of cards in Bootstrap 4
https://github.com/philipnewcomer/bootstrap4-card-tables

bootstrap bootstrap-4 bootstrap-cards bootstrap-table

Last synced: about 1 month ago
JSON representation

CSS for properly rendering tables inside of cards in Bootstrap 4

• Host: GitHub
• URL: https://github.com/philipnewcomer/bootstrap4-card-tables
• Owner: philipnewcomer
• License: mit
• Created: 2018-04-06T18:22:11.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-03-01T03:10:07.000Z (over 4 years ago)
• Last Synced: 2024-09-30T09:01:28.090Z (about 2 months ago)
• Topics: bootstrap, bootstrap-4, bootstrap-cards, bootstrap-table
• Size: 6.84 KB
• Stars: 20
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Bootstrap4 Card Tables

*CSS for properly rendering tables inside of cards in Bootstrap 4*

While Bootstrap 3 supported tables inside of panels, tables are not supported in cards (the replacement for panels) in Bootstrap 4. Although the resulting visual glitches can be fixed using several helper classes on the card component and the table itself, this is something that would be nice if it would just work. Thus, this package provides the needed styles to use tables inside of cards in Bootstrap 4 without any additional helper classes. It also modifes the horizontal padding of table cells to match that of the card header, body, and footer.

## Installation

```

npm install --save-dev bootstrap4-card-tables

```

## Usage

Import the SASS source files into your app:

```scss

@import "~bootstrap4-card-tables/src/bootstrap4-card-tables";

```

Compiled (and optionally, minified) CSS is provided in the `dist` directory:

```

https://unpkg.com/[email protected]/dist/bootstrap4-card-tables.css

https://unpkg.com/[email protected]/dist/bootstrap4-card-tables.min.css

```

## Notes

- This package fixes the use cases I encountered when trying to use tables inside of cards in Bootstrap 4, but I do not consider this package to be comprehensive. If you encounter an edge case not covered by this package, feel free to [open an issue](https://github.com/philipnewcomer/bootstrap4-card-tables/issues/new) or submit a pull request.

- There is currently an [open issue](https://github.com/twbs/bootstrap/issues/17395) and a [pull request](https://github.com/twbs/bootstrap/pull/25193) on the Bootstrap project for adding native support for tables inside of cards to an upcoming release of Bootstrap 4. While progress has been slow, it would be worth checking if there have been any recent developments there before using this package.

## Screenshots

Given the markup below, this package fixes the visual glitches without requiring any additional classes to be added to the markup.

### Before



### After



### HTML

```html



    
Card Header


    

        

            

                Column 1

                Column 2

                Column 3

            

        

        

            

                Row 1 Cell 1

                Row 1 Cell 2

                Row 1 Cell 3

            

            

                Row 2 Cell 1

                Row 2 Cell 2

                Row 2 Cell 3

            

            

                Row 3 Cell 1

                Row 3 Cell 2

                Row 3 Cell 3

            

        

    

    


        Card Footer

    



```