BootStrap Customization

Question

I'm looking to make (well.. in the process of making..) a tabbed page. I made a "tabbed box" with the border-top:none property so it looks like it's a part of the tabs, and inside of that I have a table.

I was wondering, is there a way to remove ALL borders (except bottom) of the table headers, but keep all surrounding borders on all table data cells? The table header borders are conflicting with the 'seamless' aspect of the tab box I created. Here is my code (using bootstrap 3). If you know any classes that would replace all this, great, if not, some CSS guidance would be exceptional.

<div style="width:95%; margin:0 auto;">
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#uno" data-toggle="tab">Tab 1</a></li>
        <li><a href="#dos" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tres" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content" style="width:99.9%; margin:0 auto; outline: 1px solid #ddd">
        <div class="tab-pane fade active in" id="uno">
            <table class="table table-striped table-bordered tablesorter">
                <thead>

                </thead>
                <tbody>

                </tbody>
            </table>
        </div>

        <div class="tab-pane fade in"id="dos">
            <table class="table table-striped table-bordered tablesorter">
                <thead>

                </thead>
                <tbody>

                </tbody>
            </table>
        </div>

        <div class="tab-pane fade in" id="tres">
            <table class="table table-striped table-bordered tablesorter">
                <thead>

                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>

Please note I removed table content just for the sake of clean code, I just left the structure in tact.

That removed the tab borders, I asked for the table header borders () — Sterling Archer, Oct 03 '13 at 20:41
That was just the same code you posted. I just put it into a fiddle for the benefit of other viewers. (And so I could work on it) — Joshua Dwire, Oct 03 '13 at 20:42
This doesn't happen to be what you want does it: `th{border-top:0px solid transparent!important;border-left:0px solid transparent!important;border-right:0px solid transparent!important; }` [JSFiddle](http://jsfiddle.net/jdwire/hc45U/2/) — Joshua Dwire, Oct 03 '13 at 20:45
SORT OF!! First: what is !important? Second: It does not remove the top border, nor the outside borders. It did remove the inside header borders though, so it's very close — Sterling Archer, Oct 03 '13 at 20:48
I modified your code, replacing 0px solid transparent with "hidden" and that worked. Post it as an answer and I'll mark it when I can — Sterling Archer, Oct 03 '13 at 20:51

Joshua Dwire · Accepted Answer · 2013-10-03T21:10:30.557

1

I think this is the css you're looking for:

table.table-bordered>thead>tr>th,
table.table-bordered {
    border-left:0;
    border-right:0;
    border-top:0;
}

This should remove the top, left, and right borders from the table and th elements.

JSFiddle: http://jsfiddle.net/jdwire/hc45U/8/

edited Oct 03 '13 at 21:10

answered Oct 03 '13 at 20:53

Joshua Dwire

5,415
5
29
50

!important should be avoided at all costs. It is a nuclear option in CSS. – Sean Ryan Oct 03 '13 at 20:54
@SeanRyan Yes, but without knowing the future structure of the OP's html, it's the only thing I can guarantee to work. I've added an alternative solution. – Joshua Dwire Oct 03 '13 at 20:55
Well, you don't need to know the future structure, you just need to know the specificity of Bootstrap's CSS, and then match or beat to override it. – Sean Ryan Oct 03 '13 at 20:58
@SeanRyan Got it, I figured out how to do it without `!important`. – Joshua Dwire Oct 03 '13 at 21:02
Also, rather than doing `0px solid transparent`, why not just do `none`? – Sean Ryan Oct 03 '13 at 21:02
Not sure why you didn't use `none` but the selectors work perfectly. Once I read up what `!important` was I ditched it, not worth a nuclear explosion lol – Sterling Archer Oct 03 '13 at 21:06
@SeanRyan @RUJordan `border:none` is known to be less compatible (won't work in IE<8). See http://stackoverflow.com/q/10538111/1721527 – Joshua Dwire Oct 03 '13 at 21:07
Actually, it looks like `border:0` will work: http://bitesizebugs.wordpress.com/2009/08/17/border-none-not-working-on-text-input-in-internet-explorer/ – Joshua Dwire Oct 03 '13 at 21:09
Regarding none not being – Sean Ryan Oct 03 '13 at 21:17
@SeanRyan True, but `border:0` works on IE7 and is shorter than `border:none` too. – Joshua Dwire Oct 03 '13 at 21:19

score 1 · Answer 2 · answered Oct 03 '13 at 20:57

1

I would drop the .table-bordered class, and then add back the right hand border on all cells but the last one. The relevent CSS:

.table tbody tr td:not(:last-child),
.table thead tr th:not(:last-child) {
    border-right:1px solid #ddd;
}

A working example: http://bootply.com/85323

answered Oct 03 '13 at 20:57

Sean Ryan

6,048
2
25
23

IE<9 doesn't support the `:not` pseudo-class: http://quirksmode.org/css/selectors/#link5 – Joshua Dwire Oct 03 '13 at 21:04
Being that it does not impede function, in my mind that is irrelevant. Avoiding simple solutions to make a design pixel perfect on a browser that is seven years old is not a good use of resources. – Sean Ryan Oct 03 '13 at 21:10

BootStrap Customization

2 Answers2