From ab093b90f65fde53cc05ffbf9fb4de7bdf2b5215 Mon Sep 17 00:00:00 2001
From: Varunram <vrg2009@ymail.com>
Date: Wed, 11 Oct 2017 00:01:57 +0530
Subject: [PATCH] Add borderless table class along with docs. Rebase
---
docs/4.0/content/tables.md | 80 ++++++++++++++++++++++++++++++++++++++
scss/_tables.scss | 6 +++
2 files changed, 86 insertions(+)
diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md
index 59bdb6373c..23ba594f80 100644
--- a/docs/4.0/content/tables.md
+++ b/docs/4.0/content/tables.md
@@ -298,6 +298,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 6bd0b91a43..0f721d7c58 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -151,6 +151,12 @@
}
}
+.table-borderless {
+ th,
+ td {
+ border: 0;
+ }
+}
// Responsive tables
//
--
GitLab