单元格内的边框答案

【问题标题】：Border inside a cell单元格内的边框
【发布时间】：2014-03-17 01:07:30
【问题描述】：

如何设置 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
}

【问题讨论】：

标签： html-table hover border cell

【解决方案1】：

当单元格不是 :hover 时，您可以尝试为单元格添加一个白色或透明边框，并在它是 :hover 时用您的彩色边框覆盖这个白色边框。所以你没有动静。

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

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

【讨论】：

我试过了，但是透明边框会覆盖悬停的边框。实际上只显示底部和右侧，而左侧和顶部被透明边框隐藏。无论如何，它不会这样移动。
真的吗？在给定的 jsFiddle 示例中，我没有隐藏的左上边框。它只是底部和右侧的另一种颜色，因为悬停边框样式设置为“插入”，这意味着浏览器将更改左右边框的颜色以创建 3D 感觉。试试这个，也许这就是你想要的？ jsfiddle.net/qw6vT
好的，知道了。我不得不删除边框折叠，因为它折叠了表格边框和 td 边框，从而移动了行。

【解决方案2】：

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

类似：

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

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

干杯 -L

【讨论】：