Td离开边界不适用

时间:2015-09-09 04:16:41

标签: javascript jquery html css

我正在尝试将边框样式应用于td,但它没有显示左边框,

它在某些浏览器中工作正常,但在其他浏览器上不起作用。

HTML,

<table class="table-bordered">
    <thead>
        <tr>
            <th>One</th>
            <th>Tow</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>

互动 -

$("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;    
}

测试环境详细信息

Google Chrome - 版本45.0.2454.85 m

Fiddle

0 个答案:

没有答案