CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
prisoner24601
prisoner24601

Reputation: 249

Border-Color on table refuses to work

I am trying to do something oh so simple, apply a border color to a table, as well as a small radius, like so:

.myTable {
    border: 1px solid #b6dde3;
    -ms-border-radius: 4px;
    border-radius: 4px;
}

<table class="myTable">
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

This works fine in isolation, but in a Twitter Bootstrap project no matter what I do, the appearance does not change, it just looks as though no styling has been applied to it all!

All of my other CSS works normally.

Is this normal Bootstrap behaviour? How do I override it?

Thanks

Upvotes: 0

Views: 72

Answers (2)

dlane
dlane

Reputation: 1131

While using BS 3.1.1, you'll need to add an additional property to CSS, as shown below (based off what you've given):

.myTable {
    border: 1px solid #b6dde3;
    -ms-border-radius: 4px; /* IE9+ supports border-radius, no need to prefix */
    border-radius: 4px;
    border-collapse: separate; /* add this */
}

View Fiddle here

Upvotes: 2

skreborn
skreborn

Reputation: 2221

As you can see here: http://jsfiddle.net/39Z5k/, it works perfectly by itself, so the bootstrap is probably just overwriting your rules.

.myTable {
    border: 1px solid #b6dde3;
    -ms-border-radius: 4px;
    border-radius: 4px;
}

<table class="myTable">
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Upvotes: 0

Related Questions