Viv*_*dra 69 css fluid-layout css-tables
<html>
<style type="text/css">
.table { display: table;}
.tablerow { display: table-row; border:1px solid black;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>
根据我的理解,应该在我通过tablerow类指定的每一行上画一个黑色边框.但边框不会出现.
我想改变一行的高度.如果我用'px'指定它 - 它工作.但是,如果我给它一个% - 不会工作.我试过以下
.tablerow {
display: table-row;
border:1px solid black;
position: relative; //not affecting anything and the border disappears!!
//position: absolute; // if this is set,the rows overlaps and the border works
height: 40%; // works only if specified in px and not in %
}
某处出了点问题,但我无法理解在哪里.请帮忙!
dSq*_*red 146
你需要添加border-collapse: collapse;到.table类中才能使它像这样工作:
<html>
<style type="text/css">
.table { display: table; border-collapse: collapse;}
.tablerow { display: table-row; border: 1px solid #000;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>
| 归档时间： |
|
| 查看次数： |
67922 次 |
| 最近记录： |