CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1642018
user1642018

Reputation:

Bootstrap table table-condensed table-hover, Top Border not showing

I am using custom css with bootstrap for outer border. but the top border isnt visible unless i make its size to 2 px.

how can i solve this?

HTML

<table class="table table-condensed table-hover border"> 
<tr><td>#</td><td><strong>name</strong></td></tr>
<tr><td>1.</td><td>one</td></tr>
<tr><td>2.</td><td>two</td></tr>
<tr><td>3.</td><td>three</td></tr>
<tr><td>4.</td><td>four</td></tr>
</table>

CSS

@import url("http://netdna.bootstrapcdn.com/bootswatch/3.0.3/cerulean/bootstrap.min.css");
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css");

.border{
background-color:#fff;
color:#000;
padding:10px;
border:1px solid #4C7ED1;
}

http://jsfiddle.net/Xy6a6/

I would like a Outer Table Border of 1px #4C7ED1 Its visible on all sides except top , how can i fix it ?

Thanks

Upvotes: 1

Views: 15585

Answers (4)

Akash Mulik
Akash Mulik

Reputation: 325

In bootstrap 4, the class table-condensed is renamed to table-sm for consistency.

Upvotes: 6

aslawin
aslawin

Reputation: 1981

you should change your first table inside tags to thead like this:

<table class="table table-condensed table-hover border"> 
<thead><td>#</td><td><strong>name</strong></td></thead>
<tr><td>1.</td><td>one</td></tr>
<tr><td>2.</td><td>two</td></tr>
<tr><td>3.</td><td>three</td></tr>
<tr><td>4.</td><td>four</td></tr>
</table>

then you'll have top border of table and you now you can modify css rule for this element

http://jsfiddle.net/Xy6a6/3/

Upvotes: 2

Sam1604
Sam1604

Reputation: 1489

Use border:1px double #4C7ED1; instead of border:1px solid #4C7ED1;

Here is a DEMO

Upvotes: 2

knrz
knrz

Reputation: 1811

A JSFiddle with the fix.

Delving into the DOM, you'll notice that it's the <td> that have a border-top property of 1px solid #ddd. All you needed to do was select the <td>s within the first <tr> and then apply the border you wanted.

Ultimately, it meant adding this to your CSS:

.border tr:first-child td {
    border-top: 1px solid #4C7ED1;
}

Upvotes: 2

Related Questions