1826

Bootstrap 4 table with d-flex and another border color

Question:

I'm working with bootstrap 4.0 and i'm trying to use table-bordered (changing the color) and d-flex with col-* to sizing columns.

The thing is, for some reason, all borders are double if I try to change the color.

For example, this is what I'm doing:

<pre class="snippet-code-css lang-css prettyprint-override">table.table-bordered { border: 1px solid black; } table.table-bordered > thead > tr > th { border: 1px solid black; } table.table-bordered > tbody > tr > td { border: 1px solid black; } div{ margin-top: 20px; margin-left: 20px; margin-right: 20px; } <pre class="snippet-code-html lang-html prettyprint-override"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div> <table class="table table-bordered"> <tbody> <tr class="table-danger d-flex"> <td class="col-6">Cell 1</td> <td class="col-6">Cell 2</td> </tr> <tr class="d-flex"> <td class="col-6">Cell 3</td> <td class="col-6">Cell 5</td> </tr> </tbody> </table> </div>

As you can see in the example the borders are double.

With w-* clases it works ok, but they are less versatile

How can I fix this problem with d-flex and col-* ?

Answer1:

With border-collapse HTML tables "automatically" handle the repeating borders around adjacent rows & cells as <a href="https://stackoverflow.com/a/35678354/171456" rel="nofollow">explained here</a>.

Flexbox doesn't conditionally render specific left/right/top/bottom margins on each cell so it's rendering the full border which doubles-up on the bottom of each row, and around the table.

To fix this you'd need to render only the left and top borders on the tbody, then only the right and bottom borders on the td cells.

table.table-bordered { border-width: 0; } table.table-bordered tbody { border-style: solid; border-color: black; border-width: 1px 0 0 1px; } table.table-bordered td { border-color: black; border-width: 0 1px 1px 0; }

<a href="https://www.codeply.com/go/JAst9a3XHr" rel="nofollow">https://www.codeply.com/go/JAst9a3XHr</a>

Answer2:

Use borders for only td with negative margin and remove borders for table and th

<pre class="snippet-code-css lang-css prettyprint-override">table.table-bordered > tbody > tr > td { border: 1px solid black; margin:-0.5px; } div{ margin-top: 20px; margin-left: 20px; margin-right: 20px; } <pre class="snippet-code-html lang-html prettyprint-override"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div> <table class="table table-bordered"> <tbody> <tr class="table-danger d-flex"> <td class="col-6">Cell 1</td> <td class="col-6">Cell 2</td> </tr> <tr class="d-flex"> <td class="col-6">Cell 3</td> <td class="col-6">Cell 5</td> </tr> </tbody> </table> </div>

Recommend

  • Getting the 'co-ordinates' of a cell using jQuery
  • Getting the inner-most row in the embedded tables
  • How can I refresh the entire table sorting cache after dynamic table update?
  • Get the Id/name of an element from dynamically generated HTML JQuery
  • Selenium - How to skip the record from the Set after the its first occurrence
  • Jquery Show & ScrollTop (or ScrollTo)
  • How to add regEx in angular filter
  • Caret disappears when the background of a textbox is gray in wpf
  • garbled css name when styling within UiBinder
  • How to open html table in xls on click of a button
  • how to get username into sql trigger when multiple users signed on from asp membership
  • cell spacing in div table
  • Floated image with variable width and heading with background image
  • How to view images from protected folder with php?
  • Adjust width of select element according to selected option's width
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Webgrid not refreshing after delete MVC
  • Custom validator control occupying space even though display set to dynamic
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Jquery UI tool tip close icon
  • Disable Enter in editText android
  • Read a local file using javascript
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to check if every primary key value is being referenced as foreign key in another table
  • Unanticipated behavior
  • Traverse Array and Display in markup
  • How to delete a row from a dynamic generate table using jquery?
  • Android Studio and gradle
  • python regex in pyparsing
  • Qt: Run a script BEFORE make
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal