Question

如何设置CSS以在td内显示边框而不是在悬停时显示外部。通常，当我悬停一个单元格并且我在悬停样式中设置了边框时，表格行会按悬停边框的宽度移动。我希望它显示在里面，因此没有移动。（例如，单元格是10px宽度，我添加2px边框，我仍然希望它是10像素宽度，但每边有2px边框，因此剩余6px用于同意。）

jsfiddle：http://jsfiddle.net/reg4f/

这是我的HTML：

<table>
<tr>
 <td>
   <a>po</a>
 </td>
 <td>
   <a>út</a>
 </td>
</tr>
<table>

和CSS

table {
  width: 250px;
  height: 250px;
  table-layout: fixed;
  border: solid black 1px;
  border-collapse: collapse;
}
table td, table tr {
  text-align: right;
  vertical-align:middle; 
}
td:hover{
  background-color: #E5F3FB;
  border: solid 4px #70C0E7;
  border-style: inset;
}
td a {
  display:block;width:100%;height:100%;margin:0
}

Answer 1

您可以尝试向单元格添加白色或透明边框，如果不是这样：悬停并覆盖此彩色边框的白色边框：悬停。所以你没有动静。

td {
 border: solid 4px rgba(0,0,0,0);   
}

这是一个例子： http://jsfiddle.net/G6w9P/

Answer 2

我建议添加填充不悬停与悬停边框相同的宽度。在悬停时删除填充并添加边框。

类似的东西：

td{
    padding:2,2,2,2;
    border:none;
}

td:hover{
    padding:0,0,0,0;
    border:solid 2px red;
}

干杯 -L

细胞内的边界

2 个答案: