考虑以下设置:
$(function() {
var $cols = $("td:nth-child(2), th:nth-child(2)");
$cols.hover(function() {
$cols.addClass("highlight");
}, function() {
$cols.removeClass("highlight");
});
});

div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: 500px;
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 10px;
background-color: #fff;
border: 1px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
tr:last-child td.highlight {
border-bottom-color: black;
}
th {
border: 1px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
th.highlight {
border-top: 10px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Important</th>
<th>Information</th>
<th>Interchange</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello world, how are you today</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>More things</td>
<td>Cow level is real!!1111</td>
<td>over 9000%</td>
</tr>
</tbody>
</table>
</div>
&#13;
正如您所看到的,突出显示的表格显示了丑陋的箭头&#34;在悬停时从边界开始:
我怎样摆脱那些?
答案 0 :(得分:1)
在这里,试试这个......边界越大,角度越明显。我将边框大小更改为0px
小提琴:https://jsfiddle.net/uqdebsxp/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Important</th>
<th>Information</th>
<th>Interchange</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello world</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>Hello world</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>More things to come</td>
<td>over 9000%</td>
<td>Cow level is real!</td>
</tr>
</tbody>
</table>
</div>
CSS
div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: auto;
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 10px;
background-color: #fff;
border: 0px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
tr:last-child td.highlight {
border-bottom-color: black;
}
th {
border: 0px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
th.highlight {
border-top: 10px solid black;
}
答案 1 :(得分:0)
您需要使用此CSS
手动删除列中悬停项目的$(function() {
var $cols = $("td:nth-child(2), th:nth-child(2)");
$cols.hover(function() {
$cols.addClass("highlight");
}, function() {
$cols.removeClass("highlight");
});
});
:
div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: auto;
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 10px;
background-color: #fff;
border: 1px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
th {
border: 1px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
/* New CSS */
tbody tr:first-child > td.highlight {
border-bottom: 1px solid black;
border-top: 1px solid black;
}
tr:last-child td.highlight {
border-bottom-color: black;
border-top: 1px solid;
}
th.highlight {
border-top: 10px solid black;
border-bottom: 1px solid;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Important</th>
<th>Information</th>
<th>Interchange</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello world</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>More things to come</td>
<td>over 9000%</td>
<td>Cow level is real!</td>
</tr>
</tbody>
</table>
</div>
&#13;
{{1}}&#13;
答案 2 :(得分:0)
感谢所有好的答案。作为我,我对“它不起作用”并不满意,并找到了一种只需很小调整的方法,见下文。
div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: 500px;
border-collapse: separate;
border-spacing: 0;
}
td {
vertical-align: top;
padding: 0;
background-color: #fff;
border: 0px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td > div, th > div {
padding: 10px;
border-top: 1px solid #edf0f1;
background: none;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
tr:last-child td.highlight {
border-bottom-color: black;
}
th {
border: 0px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
th.highlight {
border-top: 10px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th data-col="1"><div>Important</div></th>
<th data-col="2"><div>Information</div></th>
<th data-col="3"><div>Interchange</div></th>
</tr>
</thead>
<tbody>
<tr>
<td data-col="1"><div>Hello world, how are you today</div></td>
<td data-col="2"><div>again</div></td>
<td data-col="3"><div>and we're done</div></td>
</tr>
<tr>
<td data-col="1"><div>More things</div></td>
<td data-col="2"><div>Cow level is real!!1111</div></td>
<td data-col="3"><div>over 9000%</div></td>
</tr>
</tbody>
</table>
</div>
BeanPostProcessor
所需要的只是将内容包装成div并稍微调整一下CSS。
这样,我保留了表的属性(包括动态行高),但仍然可以突出显示每列。希望它可以帮到某人。