css div только внутренняя граница

Я надеюсь, что кто-то может мне помочь. Я пытаюсь получить к этому:css div только внутренняя граница

enter image description here

Это то, что я до сих пор:

enter image description here

А ниже мой текущий HTML. Как я могу показать границу только на внутренней части divs (как на первом снимке экрана)? Кроме того, как мне сделать высоту и ширину каждого div квадратным (не прямоугольным)? Лучше ли использовать таблицу html или это возможно с помощью div? Код html динамически генерируется, поэтому я не могу просто добавить правую/левую границу для отдельных div.

<div style="width: 100%; text-align: center;">        
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"> 
    <span style="font-weight: bold;">S</span> 
    <br/> 
    0&#45;0 
</div> 
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"> 
    <span style="font-weight: bold;">M</span> 
    <br/> 
    5&#45;7 
</div>  
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"> 
    <span style="font-weight: bold;">T</span> 
    <br/> 
    5&#45;7 
</div>  
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"> 
    <span style="font-weight: bold;">W</span> 
    <br/> 
    5&#45;7 
</div>  
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"> 
    <span style="font-weight: bold;">R</span> 
    <br/> 
    5&#45;7 
</div>  
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"> 
    <span style="font-weight: bold;">F</span> 
    <br/> 
    7&#45;5 
</div>  
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"> 
    <span style="font-weight: bold;">S</span> 
    <br/> 
    0&#45;0 
</div>

источник

2013-02-20 obautista

Хотите добиться этого? http://jsfiddle.net/5WY82/ – wildhaber

Почти - последняя ячейка имеет правую границу. Кроме того, клетки не являются идеальным квадратом. Последнее, поскольку html-код динамически генерируется, я не могу просто удалить стиль border-right в последнем div. Есть ли способ динамически устанавливать границы? – obautista

<style type="text/css"> 
.wrapper { 
    width: 400px; 
    text-align: center; 
} 
span { 
    display:block; 
} 
.box { 
    float: left; 
    height:40px; 
    width: 40px; 
    background-color: #CCCCCC; 
    border-left: 1px solid black; 
} 
.box.act { 
    background-color:white; 
} 
.box:first-child { 
    border:none; 
} 
.box > span:first-child { 
    font-weight:bold; 
} 
</style> 

<div class="wrapper"> 
    <div class="box"> 
     <span>S</span> 
     <span>0&#45;0</span> 
    </div> 
    <div class="box"> 
     <span>M</span> 
     <span>5&#45;7</span> 
    </div>  
    <div class="box"> 
     <span>T</span> 
     <span>5&#45;7</span> 
    </div>  
    <div class="box"> 
     <span>W</span> 
     <span>5&#45;7</span> 
    </div>  
    <div class="box"> 
     <span>R</span> 
     <span>5&#45;7</span> 
    </div>  
    <div class="box act"> 
     <span>F</span> 
     <span>7&#45;5</span> 
    </div>  
    <div class="box"> 
     <span>S</span> 
     <span>0&#45;0</span> 
</div>

источник

2013-02-20 16:10:23 caramba

имеет основную оболочку на 100%? – caramba

Ключевым здесь является селектор ': first-child'. –

не добавить границы на последних делах.

использование обивка установить ширину и heigts

источник

2013-02-20 15:59:07

css div только внутренняя граница

ответ

Смежные вопросы