CODEWITHSUNDEEP
htmlcsshtml-tablecss-tables
user1561346
user1561346

Reputation: 502

Change color of table cell border

I want to be able to change color of any table cell border. I've decided to not use border-left, border-right, etc, because it's not possible to make it pixel-perfect. Different browsers render it in a different way. Especially in borders intersection area. I came up with the approach, but it's not working in IE as I expected:

enter image description here

HTML:

<table>
    <tr>
        <td>
            line 1
            <div class="left-border"></div>
        </td>
        <td>
            line 1<br>
            line 2
        </td>
    <tr>
</table>

CSS:

table {
    border-collapse: collapse;
}

table, th, td {
   border: 1px solid #ccc;
}

tr {
    vertical-align: top;
}

td {
    position: relative;
    padding: 5px;
}

.left-border {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 1px;
    background-color: #000;
}

JSFIDDLE: http://jsfiddle.net/dv1oqopL/5/

Upvotes: 1

Views: 1238

Answers (1)

Victor Radu
Victor Radu

Reputation: 2292

well IE is a B***h as always, it just calculates the height of the td based on it's own content so I have no clean fix for you but a hack that might solve your issue is to add

border-left:1px solid #000;

on that td, this will fill the border underneath your div and look the part an all browsers.

Upvotes: 1

Related Questions