{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 地球回转人心会变 的问题《css display:table not displaying the border》','https://www.manongdao.com/q-465438.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
<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>
According to my understanding,a black border should be drawn on each of the rows which i've specified via tablerow class.But the border doesnt come up.
And i wanted to change the height of a row.If i specify it with 'px' -- it work.But,if i give it with a % -- wont work.I tried the following
.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 %
}
Something is going wrong somewhere, but I am not able to understand where. Please help!
Table rows can't have a border attribute. You can get a border around each row by giving all cells a top and bottom border, and adding a class for the left-most and right-most cells with a left and right border respectively.
JS fiddle link
edit: I forgot about
border-collapse:collapse. That will work too.You need to add the
borderto thetablecellclass.Also, to make it look nice, you will need to add
border-collapse:collapse;to the table class.Example: http://jsfiddle.net/jasongennaro/4bvc2/
EDIT
As per the comment
Yes, but once you set it to display as a
tablethat is how it will act... as atable, so you will then need to follow the css rules for displaying tables.If you need to set the
borderonly on the rows, useborder-topandborder-bottomand then set specific classes for the leftmost and rightmost cells.You need to add
border-collapse: collapse;to the.tableclass for it to work like this: