fix(tables): drop docs specific tables style and move some `.table-re…

…sponsive` at the right place (#1710)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>

site/assets/scss/_content.scss

@@ -32,29 +32,7 @@
   // Override Bootstrap defaults
   > .table,
   > .table-responsive .table {
-    max-width: 100%;
-    margin-bottom: 1.5rem;
-    @include font-size(.875rem);
-
-    thead {
-      border-bottom: 2px solid currentcolor;
-    }
-
-    tbody:not(:first-child) {
-      border-top: 2px solid currentcolor;
-    }
-
-    th,
-    td {
-      &:first-child {
-        padding-left: 0;
-      }
-
-      &:not(:last-child) {
-        padding-right: 1rem; // Boosted mod
-      }
-    }
-
+    // Boosted mod: remove unwanted rules
     // Prevent breaking of code
     // stylelint-disable-next-line selector-max-compound-selectors
     th,

site/content/docs/5.2/content/tables.md

@@ -664,8 +664,8 @@ Add a [`.form-check` div]({{< docsref "/forms/checks-radios#checks" >}}) within
 The selection behavior isn't implemented yet. This feature will be delivered with [#410]({{< param repo >}}/issues/410) as an example.
 {{< /callout >}}
 
-<div>
-  <table class="table table-sm table-hover table-responsive has-checkbox">
+<div class="table-responsive">
+  <table class="table table-sm table-hover has-checkbox">
     <caption class="visually-hidden">Boosted table with a selection feature</caption>
     <thead>
       <tr>
@@ -801,8 +801,8 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
 </div>
 
 ```html
-<div>
-  <table class="table table-sm table-hover table-responsive has-checkbox">
+<div class="table-responsive">
+  <table class="table table-sm table-hover has-checkbox">
     ...
     <thead>
       <tr>
@@ -864,8 +864,8 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
 
 Use SVG to display thumbnails or icons in your table data cell elements.
 
-<div>
-  <table class="table table-sm table-hover table-responsive align-middle has-checkbox">
+<div class="table-responsive">
+  <table class="table table-sm table-hover align-middle has-checkbox">
     <caption class="visually-hidden">Boosted table with icons in a row</caption>
     <thead>
       <tr>
@@ -1065,8 +1065,8 @@ Use SVG to display thumbnails or icons in your table data cell elements.
 </td>
 ```
 
-<div>
-  <table class="table table-responsive align-middle">
+<div class="table-responsive">
+  <table class="table align-middle">
     <caption class="visually-hidden">Boosted table with icons inside a row</caption>
     <thead>
       <tr>