CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sterling Archer
Sterling Archer

Reputation: 22395

BootStrap Customization

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.

Upvotes: 0

Views: 130

Answers (2)

Joshua Dwire
Joshua Dwire

Reputation: 5443

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/

Upvotes: 1

Sean Ryan
Sean Ryan

Reputation: 6056

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

Upvotes: 1

Related Questions