Как установить границу элемента в моем случае

Question

Я пытаюсь создать div-хаус для моего стола.

Я хочу поместить div в ячейку таблицы, которая блокирует нижнюю границу ячейки и создает эффект, который ячейка расширяется ниже.

HTML

<table cellspacing="15"> 
    <tr> 
     <td>123</td><td>123 <div class="block"></div></td><td>123</td><td>123</td> 
    </tr> 
    <tr> 
     <td>123</td><td>123</td><td>123</td><td>123</td> 
    </tr> 
    <tr> 
     <td>123</td><td>123</td><td>123</td><td>123</td> 
    </tr>  
</table> 

CSS

td { 
    position:relative; 
    border:solid 1px red; 
    padding:0; 
} 

.block { 
    background-color: white; 
    border-left:solid 1px red; 
    border-right:solid 1px red; 
    position:absolute; 
    width:100%; 
    height:10px; 
    top:10px; 

} 

http://jsfiddle.net/tfjm7L5y/

По какой-то причине, граница левой и границы прямо в моем .block DIV не выстраиваются в линию с правом ячейки таблицы/левая граница. Что-то мне здесь не хватает? Спасибо за помощь!

Answer 1

Вы можете указать left, чтобы учесть возникновение несоосности. Элемент .block <div> является дочерним элементом его родителя, и поэтому его граница также содержится в пределах родительского пространства <td>. Вот почему ваш .block <div> не подходит к самой дальней внешней границе на <td>. Разница должна быть размером родителя <td> border (1px).

.block { 
    background-color: white; 
    border-left:solid 1px red; 
    border-right:solid 1px red; 
    position:absolute; 
    width:100%; 
    height:10px; 
    top:10px; 
    left: -1px; 

} 

http://jsfiddle.net/tfjm7L5y/1/