diff options
| author | Mark Otto <[email protected]> | 2018-01-20 15:06:02 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2018-01-20 15:06:02 -0800 |
| commit | f800383e7da1d19797a77e8cecbe5bc8c5c52029 (patch) | |
| tree | 27a9246257018a979ab2c9d32349f0e152cbe116 | |
| parent | d5b10c9fc7f380c484bdfb7af1f68dae5c8b114c (diff) | |
| parent | ab093b90f65fde53cc05ffbf9fb4de7bdf2b5215 (diff) | |
| download | bootstrap-f800383e7da1d19797a77e8cecbe5bc8c5c52029.tar.xz bootstrap-f800383e7da1d19797a77e8cecbe5bc8c5c52029.zip | |
Merge branch 'borderless-table' of https://github.com/Varunram/bootstrap into Varunram-borderless-table
| -rw-r--r-- | docs/4.0/content/tables.md | 80 | ||||
| -rw-r--r-- | scss/_tables.scss | 6 |
2 files changed, 86 insertions, 0 deletions
diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md index f2a3b4ce4..33abf8936 100644 --- a/docs/4.0/content/tables.md +++ b/docs/4.0/content/tables.md @@ -286,6 +286,86 @@ Add `.table-bordered` for borders on all sides of the table and cells. </table> {% endexample %} +## Borderless table + +Add `.table-borderless` for a table without borders. + +{% example html %} +<table class="table table-borderless"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Mark</td> + <td>Otto</td> + <td>@TwBootstrap</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">4</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + +{% example html %} +<table class="table table-borderless table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Mark</td> + <td>Otto</td> + <td>@TwBootstrap</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">4</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + ## Hoverable rows Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. diff --git a/scss/_tables.scss b/scss/_tables.scss index 9e88743cf..1f13fb78e 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -151,6 +151,12 @@ } } +.table-borderless { + th, + td { + border: 0; + } +} // Responsive tables // |