{"id":15063541,"url":"https://github.com/philipnewcomer/bootstrap4-card-tables","last_synced_at":"2025-04-10T11:11:46.534Z","repository":{"id":71111086,"uuid":"128434046","full_name":"philipnewcomer/bootstrap4-card-tables","owner":"philipnewcomer","description":"CSS for properly rendering tables inside of cards in Bootstrap 4","archived":false,"fork":false,"pushed_at":"2020-03-01T03:10:07.000Z","size":7,"stargazers_count":20,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T10:03:49.454Z","etag":null,"topics":["bootstrap","bootstrap-4","bootstrap-cards","bootstrap-table"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/philipnewcomer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-06T18:22:11.000Z","updated_at":"2022-05-22T15:46:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"8b8f190c-de88-43f3-942a-f6c303dce39e","html_url":"https://github.com/philipnewcomer/bootstrap4-card-tables","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philipnewcomer%2Fbootstrap4-card-tables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philipnewcomer%2Fbootstrap4-card-tables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philipnewcomer%2Fbootstrap4-card-tables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philipnewcomer%2Fbootstrap4-card-tables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/philipnewcomer","download_url":"https://codeload.github.com/philipnewcomer/bootstrap4-card-tables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248131459,"owners_count":21052819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-4","bootstrap-cards","bootstrap-table"],"created_at":"2024-09-25T00:04:23.180Z","updated_at":"2025-04-10T11:11:46.515Z","avatar_url":"https://github.com/philipnewcomer.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap4 Card Tables\n\n*CSS for properly rendering tables inside of cards in Bootstrap 4*\n\nWhile 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.\n\n## Installation\n\n```\nnpm install --save-dev bootstrap4-card-tables\n```\n\n## Usage\n\nImport the SASS source files into your app:\n\n```scss\n@import \"~bootstrap4-card-tables/src/bootstrap4-card-tables\";\n```\n\nCompiled (and optionally, minified) CSS is provided in the `dist` directory:\n\n```\nhttps://unpkg.com/bootstrap4-card-tables@1.2.0/dist/bootstrap4-card-tables.css\nhttps://unpkg.com/bootstrap4-card-tables@1.2.0/dist/bootstrap4-card-tables.min.css\n```\n\n## Notes\n\n- 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.\n- 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.\n\n## Screenshots\n\nGiven the markup below, this package fixes the visual glitches without requiring any additional classes to be added to the markup.\n\n### Before\n\n\u003cimg width=\"728\" alt=\"before screenshot\" src=\"https://user-images.githubusercontent.com/1446874/60402871-5fa18800-9b63-11e9-8ac8-05339a18d85a.png\"\u003e\n\n### After\n\n\u003cimg width=\"728\" alt=\"after screenshot\" src=\"https://user-images.githubusercontent.com/1446874/60402886-75af4880-9b63-11e9-89e6-1578b5f75731.png\"\u003e\n\n### HTML\n\n```html\n\u003cdiv class=\"card\"\u003e\n    \u003cdiv class=\"card-header\"\u003eCard Header\u003c/div\u003e\n\n    \u003ctable class=\"table table-bordered\"\u003e\n        \u003cthead\u003e\n            \u003ctr\u003e\n                \u003cth\u003eColumn 1\u003c/th\u003e\n                \u003cth\u003eColumn 2\u003c/th\u003e\n                \u003cth\u003eColumn 3\u003c/th\u003e\n            \u003c/tr\u003e\n        \u003c/thead\u003e\n\n        \u003ctbody\u003e\n            \u003ctr\u003e\n                \u003ctd\u003eRow 1 Cell 1\u003c/td\u003e\n                \u003ctd\u003eRow 1 Cell 2\u003c/td\u003e\n                \u003ctd\u003eRow 1 Cell 3\u003c/td\u003e\n            \u003c/tr\u003e\n\n            \u003ctr\u003e\n                \u003ctd\u003eRow 2 Cell 1\u003c/td\u003e\n                \u003ctd\u003eRow 2 Cell 2\u003c/td\u003e\n                \u003ctd\u003eRow 2 Cell 3\u003c/td\u003e\n            \u003c/tr\u003e\n\n            \u003ctr\u003e\n                \u003ctd\u003eRow 3 Cell 1\u003c/td\u003e\n                \u003ctd\u003eRow 3 Cell 2\u003c/td\u003e\n                \u003ctd\u003eRow 3 Cell 3\u003c/td\u003e\n            \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n\n    \u003cdiv class=\"card-footer\"\u003e\n        Card Footer\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilipnewcomer%2Fbootstrap4-card-tables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphilipnewcomer%2Fbootstrap4-card-tables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilipnewcomer%2Fbootstrap4-card-tables/lists"}