diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md index f2a3b4ce4de97fb0f02c5c51a1d327651076f0ca..33abf893617676c2b1f6da726d182afec97520e4 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 9e88743cf7ae265e7acf5981c605df9466f81994..1f13fb78e85ac5fa1ce9e31aacc80f32116565c9 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -151,6 +151,12 @@ } } +.table-borderless { + th, + td { + border: 0; + } +} // Responsive tables //