Home/ Questions/Q 6367495
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:33:17+00:00

<html> <style type="text/css"> .table { display: table;} .tablerow { display: table-row; border:1px solid black;}

  • 0
<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 doesn’t come up.

And I wanted to change the height of a row. If I specify it with ‘px’ — it works. But, if I give it with a % — won’t 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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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