css display:table not displaying the border

问题

<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!

回答1:

You need to add border-collapse: collapse; to the .table class for it to work like this:

<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>

回答2:

You need to add the border to the tablecell class.

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

i'm applying a border to a div,it should get displayed right ?

Yes, but once you set it to display as a table that is how it will act... as a table, so you will then need to follow the css rules for displaying tables.

If you need to set the border only on the rows, use border-top and border-bottom and then set specific classes for the leftmost and rightmost cells.

回答3:

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.

来源：https://stackoverflow.com/questions/7175049/css-displaytable-not-displaying-the-border

标签

fluid-layout

css

css-tables