CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Victor
Victor

Reputation: 5353

Table right border (bootstrap + custom css)

I'm using bootstrap 2.3 version and some custom CSS styles. I got next problem: when I try to add right border to the last td in row it is not displayed. But it is displayed when I zoom browser window, or if I set width to 2px. I use chrome but it seems like in firefox there is the same issue.

Jsfiddle example: http://jsfiddle.net/Ct7dC/

CSS:

    table.entity-table > tbody > tr > td:last-child {
        border-right: 1px solid #DDD; /* It works only if I set 2px width. Also works with 1px width but if I zoom browser window */
    }

Also noticed that when I zoom the page table left and right borders become not straight

Upvotes: 0

Views: 3320

Answers (2)

nkmol
nkmol

Reputation: 8091

For the border-right not being smooth is duo the th ontop of it has no extra width from the border(it simply has no border), because the row has gaint some extra width because the border-right is no inline border. You can fix this by ginving the th also a border.

table.entity-table > thead > tr > th 
{
    background-color: #DDD;
    color: #000;
    border: 1px solid #DDD;
}

jsFiddle

Now for the Ubuntu problem. I don't know if you use a variant of chrome(like chromium)?

Edit

The fiddle also works on chromium windows, so certainly has to do something width ubuntu.

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this demo

css

table.entity-table > tbody > tr > td {
    vertical-align: middle;
border-left: 1px solid #DDD;
}

Upvotes: 0

Related Questions