我有div看起来像桌子,这是我的代码:
.cell {
border: 1px solid red;
display: table-cell
}
.tableLike {
padding-bottom: 30px;
display: table
}
.rowLike {
display: table-row
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}

<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
&#13;
现在所有的列都有不同的宽度,我不知道为什么。我希望div得到不同的宽度但同步。
答案 0 :(得分:2)
使用display:table这样的
.tableLike{width:100%;display:table;}
.cell{border:1px solid red;display:table-cell;}
.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 15%;}
&#13;
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
&#13;
答案 1 :(得分:0)
添加正确的显示样式:
.cell {
border: 1px solid red;
display: table-cell;
}
.tableLike {
padding-bottom: 30px;
display: table;
}
.rowLike {
display: table-row;
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
&#13;
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
&#13;
答案 2 :(得分:0)
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
&#13;
{{1}}&#13;
答案 3 :(得分:0)
我会这样做的。 你可以试试,但这可能不是最好的答案。
.cell {
border-right:1px solid red;
border-bottom:1px solid red;
display: table-cell
}
.tableLike {
padding-bottom: 30px;
display: table
}
.rowLike {
display: table-row
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
.rowLike:nth-child(1) .cell:nth-child(1),
.rowLike:nth-child(1) .cell:nth-child(2),
.rowLike:nth-child(1) .cell:nth-child(3){
border-top:1px solid red;
}
.rowLike:nth-child(1) .cell:nth-child(1),
.icon-close{
border-left:1px solid red;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>