Граница внутри ячейки

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