CODEWITHSUNDEEP
csshtmltwitter-bootstrap-3html-table
raffian
raffian

Reputation: 32066

bootstrap table not showing row border correctly

Trying to get to the bottom :-) of this, want to show a bottom border (for each row) in a bootstrap 3 table...

<table id="modalTable1" class="table table-condensed">
  <tbody>
    <tr>
      <td class="success col-sm-3">ping</td>
      <td class="success col-sm-9">Ping test to host</td>
    </tr>
    <tr>
      <td class="success col-sm-3">http</td>
      <td class="success col-sm-9">http test</td>
    </tr>
    <tr>
      <td class="success col-sm-3">ftp</td>
      <td class="success col-sm-9">ftpo test</td>
    </tr>
   </tbody>
</table>

That's my basic table, but I need to show it inside a bootstrap modal; I don't think the modal is causing the issue, but I've provided fiddles of the table with and without the modal.

What I tried so far:

I tried the following css, but neither had any impact:

tr.border_bottom td {
    border-bottom:1pt solid black;
}

td.border_bottom td {
    border-bottom:1pt solid black;
}

...also this:

.table th, .table td {
    border-bottom:1pt solid black;
}

JSFiddle with CSS Styling

As a last resort, I tried inline styling with style="border: 1px solid black on each <td>. That sort of worked, but oddly it shows a left and top border on the table, not the cells.

JSFiddle with inline styling

Here's a fiddle with just the table (no modal dialog) JSFiddle with just table

Not sure if this is a bootstrap .table, or css issue, but I'm too new to bootstrap to rule out the former

Upvotes: 0

Views: 13186

Answers (2)

Milche Patern
Milche Patern

Reputation: 20452

First point, you can have it specified with basic bootstrap styling.

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

There seems to be another bug, i noticed that the class success is interfering from the background color .. removing the border.

Witch is caused by this declaration's position relative :

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative; /* <-- there's your money border deseapearrring ! */
}

fix

Adding position:static to your td.success seems to fix your issue.

td.success{position:static}

http://jsfiddle.net/tCgYC/13/ or http://jsfiddle.net/tCgYC/14/

I fugured it out after seeing http://getbootstrap.com/css/#tables-contextual-classes where the position:relative aren't added from the modal panel.

[post edit]

Seems related to this issue : https://github.com/twbs/bootstrap/issues/11623

Upvotes: 4

afang
afang

Reputation: 70

I recommend using !important whenever you're overriding BootStrap CSS. In this case, change:

tr.border_bottom td {
    border-bottom:1pt solid black;
}

td.border_bottom td {
    border-bottom:1pt solid black;
}

to:

tr, td.border_bottom td {
    border-bottom:1pt solid black !important;
}

Upvotes: 0

Related Questions