#html #css
#HTML #css
Вопрос:
Я ниже css и html для создания дизайна отсека с использованием div. В HTML я попробовал display: table и display : table-cell . Но я не получаю результата.
.bay-wrapper{
display: table;
width:10%;
height:auto;
float:left;
background:#fff;
text-align:center;
border-collapse:collapse;
box-sizing:border-box;
}
.bay-cell-full{
display: table-cell;
border:1px solid #000;
float:left;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bay-cell{
display: table-cell;
border:1px solid #000;
border-collapse:collapse;
float:left;
width:50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} <div class="bay-wrapper">
<div class="bay-cell-full">Bay 20</div>
<div class="bay-cell">1</div>
<div class="bay-cell">7</div>
<div class="bay-cell">2</div>
<div class="bay-cell">8</div>
<div class="bay-cell">3</div>
<div class="bay-cell">9</div>
<div class="bay-cell">4</div>
<div class="bay-cell">10</div>
<div class="bay-cell">5</div>
<div class="bay-cell">11</div>
<div class="bay-cell">6</div>
<div class="bay-cell">12</div>
</div>
Ответ №1:
В вашем примере границы сворачиваются в единую границу (свойства border-spacing и empty-cells будут проигнорированы).
Строка
border-collapse:collapse;
все в порядке. Вы уверены, что это тот эффект, который вы хотите получить?
https://jsfiddle.net/MadalinaTn/bthrbqxz/
Комментарии:
1. Да, эффект правильный. Но граница не сворачивается. Я использовал border-collapse:свернуть. но это не работает.