Рассмотрим a div
с атрибутами border-radius
, border
и background-color
CSS:
<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;">
Blah
</div>
Рассмотрим a div
с атрибутами border-radius
, border
и background-color
CSS:
<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;">
Blah
</div>
Попробуйте overflow:hidden
во внешнем div
:
<div style="border-radius:10px; border: 1px black solid; overflow: hidden">
<div style="background-color:#EEEEEE;">
Blah
</div>
</div>
Добавьте эти правила CSS:
tr:first-of-type td:first-child {
border-top-left-radius: 5px;
}
tr:first-of-type td:last-child {
border-top-right-radius: 5px;
}
tr:last-of-type td:first-child {
border-bottom-left-radius: 5px;
}
tr:last-of-type td:last-child {
border-bottom-right-radius: 5px;
}
См. обновленный fiddle.
Вы можете исправить это, применив overflow: hidden;
к элементу с границей. Я думаю, что гораздо более чистый способ.
Нужно ли использовать таблицу? Вот пример использования DIV: http://jsfiddle.net/6KwGy/1/
HTML:
<div id="container">
<div class="row">
<div class="leftHalf">
<p>data 1</p>
</div>
<div class="rightHalf">
<p>data 2</p>
</div>
</div>
<div class="row">
<div class="leftHalf">
<p>data 1</p>
</div>
<div class="rightHalf">
<p>data 2</p>
</div>
</div>
<div class="row">
<div class="leftHalf">
<p>data 1</p>
</div>
<div class="rightHalf">
<p>data 2</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
}
.leftHalf {
float:left;
width:50%;
}
.rightHalf {
float:left;
width:50%;
}
.row {
float: left;
width: 100%;
}
#container .row:nth-child(odd) {
background-color: #EEEEEE;
}
#container .row:first-child {
border-top: 1px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-radius-topleft: 5px;
-webkit-border-radius-topright: 5px;
}
#container .row:last-child {
border-bottom: 1px solid black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-radius-bottomleft: 5px;
-webkit-border-radius-bottomright: 5px;
}
#container .row {
border-left: 1px solid black;
border-right: 1px solid black;
}
Добавьте некоторое дополнение или сделайте цвет фона на внешнем элементе
Было бы приемлемым, чтобы дать div немного дополнений? Таким образом, цвета фона не будут конфликтовать.
Вы также можете добавить граничный радиус к дочернему элементу.
<div style="border-radius:10px; border: 1px black solid;">
<div style="background-color:#EEEEEE; border-radius:10px;">
Blah
</div>
</div>