When attempting to add border styling to td elements, the left border is not displaying correctly.
This issue seems to vary across different browsers.
Here is the HTML code:
<table class="table-bordered">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
Interactions:
$("tbody > tr > td").on("hover", function (event) {
var columnIndex = $(this).index() + 1;
$(this).closest("tbody").find('tr td:nth-child(' + columnIndex + ')').toggleClass('bordered', event.type === "mouseenter");
$("table").find('tr th:nth-child(' + columnIndex + ')').toggleClass('coloured', event.type === "mouseenter");
});
CSS:
td.bordered {
border-right: 1px solid red;
border-left: 1px solid red;
}
th.coloured {
background: #e8e8e8;
color: black;
}
table {
width:100%;
border-collapse:collapse;
table-layout:auto;
vertical-align:top;
margin-bottom:15px;
border:1px solid #999999;
}
th {
font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #F2EDEB;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #522D25 url(images/bg_header.jpg) no-repeat;
}
tr {
background: #fff;
color: #261F1D;
}
tr:hover, tr.alt:hover {
color: #261F1D;
background-color: #E5C37E;
}
td {
border: 1px solid #000;
}
Testing Environment Details
Tested on Google Chrome - Version 45.0.2454.85 m