Bootstrap table without stripe borders

Question

I m kinda stuck with a CSS problem while using Bootstrap  I m also using Angular JS with Angular UI bootstrap  which might be part of the problem    I m making a website that displays data in a table  Sometime  the data contains object that I have to display in tables  So I want to put borderless tables inside a normal table while keeping inside separation lines for the borderless tables    But it seems that even if I specifically say to not show the borders on a table  it is forced   HTML    lt table class  table borderless  gt    CSS    borderless table       border-top-style  none      border-left-style  none      border-right-style  none      border-bottom-style  none      So here  what I want is just the inside borders

User · Answer

similar to the rest  but more specific       table borderless td table borderless th       border  none  important

User · Answer

In my CSS    borderless tr td       border  none  important      padding  0px  important      In my directive    lt table class  table borderless  gt       lt tr class  borderless       gt    I didn t put the  borderless  for the td element   Tested and it worked  All the borders and paddings are completely stripped off

User · Answer

Since Bootstrap v4 1 you can add table-borderless to your table  see official documentation      lt table class  table table-borderless  gt

User · Answer

The border styling is set on the td elements   html    lt table class  table borderless  gt    css    borderless td   borderless th       border  none      Update  Since Bootstrap 4 1 you can use  table-borderless to remove the border   https   getbootstrap com docs 4 1 content tables  borderless-table

User · Answer

I expanded the Bootstrap table styles as Davide Pastore did  but with that method the styles are applied to all child tables as well  and they don t apply to the footer   A better solution would be imitating the core Bootstrap table styles  but with your new class    table-borderless gt thead gt tr gt th  table-borderless gt thead gt tr gt td  table-borderless gt tbody gt tr gt th  table-borderless gt tbody gt tr gt td  table-borderless gt tfoot gt tr gt th  table-borderless gt tfoot gt tr gt td       border  none      Then when you use  lt table class  table table-borderless  gt  only the specific table with the class will be bordered  not any table in the tree

User · Answer

Most examples seem to be too specific and or bloated   Here was my trimmed down solution using Bootstrap 4 0 0  4 1 includes  table-borderless but still alpha       table-borderless th border 0    table-borderless td border 0     Similar to many proposed solutions  but minimal bytes   Note  Ended up here because I was viewing BS4 1 references and couldn t figure out why  table-borderless was not working with my 4 0 sources  eg  operator error  duh

User · Answer

Using Bootstrap 3 2 0 I had problem with Brett Henderson solution  borders were always there   so I improved it   HTML   lt table class  table table-borderless  gt    CSS   table-borderless  gt  tbody  gt  tr  gt  td   table-borderless  gt  tbody  gt  tr  gt  th   table-borderless  gt  tfoot  gt  tr  gt  td   table-borderless  gt  tfoot  gt  tr  gt  th   table-borderless  gt  thead  gt  tr  gt  td   table-borderless  gt  thead  gt  tr  gt  th       border  none

User · Answer

Try this    lt table class  borderless  gt    CSS   borderless    border none      Note  What you were doing before was not working because your css code was targeting a table within your  borderless table  which probably didn t exist

User · Answer

Install bootstrap either with npm or cdn link    lt table class  table table-borderless  gt   lt thead gt   lt tr gt     lt th scope  col  gt   lt  th gt     lt th scope  col  gt First lt  th gt     lt th scope  col  gt Last lt  th gt     lt th scope  col  gt Handle lt  th gt   lt  tr gt   lt  thead gt   lt tbody gt   lt tr gt     lt th scope  row  gt 1 lt  th gt     lt td gt Mark lt  td gt     lt td gt Otto lt  td gt     lt td gt  mdo lt  td gt   lt  tr gt   lt tr gt     lt th scope  row  gt 2 lt  th gt     lt td gt Jacob lt  td gt     lt td gt Thornton lt  td gt     lt td gt  fat lt  td gt     lt  tr gt     lt tr gt     lt th scope  row  gt 3 lt  th gt       lt td colspan  2  gt Larry the Bird lt  td gt       lt td gt  twitter lt  td gt      lt  tr gt    lt  tbody gt   lt  table gt    get the reference with this link

User · Answer

Bootstrap supports scss  and he has a special variables  If this is a case then you can add in your main variables scss file  table-border-width  0   More info here https   github com twbs bootstrap blob 6ffb0b48e455430f8a5359ed689ad64c1143fac2 scss  variables scss L347-L380

User · Answer

Use hidden instead of none    hide-bottom       border-bottom-style  hidden

User · Answer

Use the border- class from Boostrap 4   lt td class  border-0  gt  lt  td gt    or   lt table class  table border-0  gt  lt  table gt    Be sure to end the class input with the last change you want to do

User · Answer

Don   t add the  table class to your  lt table gt  tag  From the Bootstrap docs on tables      For basic styling   light padding and only horizontal dividers   add the base class  table to any  lt table gt   It may seem super redundant  but given the widespread use of tables for other plugins like calendars and date pickers  we ve opted to isolate our custom table styles

User · Answer

I know this is an old thread and that you ve picked an answer  but I thought I d post this as it is relevant for anyone else that is currently looking   There is no reason to create new CSS rules  simply undo the current rules and the borders will disappear          table tbody tr th       table tbody tr td           border-top  0           going forward  anything styled with        table   will show no borders

User · Answer

I m late to the game here but FWIW  adding  table-bordered to a  table just wraps the table with a border  albeit by adding a full border to every cell     But removing  table-bordered still leaves the rule lines   It s a semantic issue  but in keeping with BS3  nomenclature I ve used this set of overrides    x000D   x000D   table table-unruled gt tbody gt tr gt td  x000D   table table-unruled gt tbody gt tr gt th   x000D    border-top  0 none transparent  x000D    border-bottom  0 none transparent  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet  gt  x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt div class  col-xs-5  gt  x000D         table x000D         lt table class  table  gt  x000D           lt thead gt  x000D             lt tr gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D             lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D             lt tr gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D             lt  tr gt  x000D             lt tr gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D           lt  tbody gt  x000D           lt tfoot gt  x000D             lt tr gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D             lt  tr gt  x000D           lt  tfoot gt  x000D         lt  table gt  x000D       lt  div gt  x000D       lt div class  col-xs-5 col-xs-offset-1  gt  x000D         lt table class  table table-bordered  gt  x000D           table  table-bordered x000D           lt thead gt  x000D             lt tr gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D             lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D             lt tr gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D             lt  tr gt  x000D             lt tr gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D           lt  tbody gt  x000D           lt tfoot gt  x000D             lt tr gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D             lt  tr gt  x000D           lt  tfoot gt  x000D         lt  table gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  row  gt  x000D       lt div class  col-xs-5  gt  x000D         lt table class  table table-unruled  gt  x000D           table  table-unruled x000D           lt thead gt  x000D             lt tr gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D             lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D             lt tr gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D             lt  tr gt  x000D             lt tr gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D           lt  tbody gt  x000D           lt tfoot gt  x000D             lt tr gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D             lt  tr gt  x000D           lt  tfoot gt  x000D         lt  table gt  x000D       lt  div gt  x000D       lt div class  col-xs-5 col-xs-offset-1  gt  x000D         lt table class  table table-bordered table-unruled  gt  x000D           table  table-bordered  table-unruled x000D           lt thead gt  x000D             lt tr gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D             lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D             lt tr gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D             lt  tr gt  x000D             lt tr gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D           lt  tbody gt  x000D           lt tfoot gt  x000D             lt tr gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D             lt  tr gt  x000D           lt  tfoot gt  x000D         lt  table gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In some cases  one must also use border-spacing in the table class  like      border-spacing  0  important

User · Answer

This one worked for me    lt td style  border-top  none   gt     The key is you need to add border-top to the  lt td gt

[html] Bootstrap table without stripe / borders

Examples related to html

Examples related to css

Examples related to twitter-bootstrap