<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">Greetings</div>
<div class="tablecell">universe</div>
</div>
<div class="tablerow">
<div class="tablecell">apples</div>
<div class="tablecell">bananas</div>
</div>
</div>
</html>
My intention was to have a black border around each row specified with the tablerow class. However, I am encountering an issue where the border is not appearing.
I also wanted to adjust the height of a row. When specifying the height in pixels it works fine, but using a percentage value does not produce the desired result. Here is what I tried:
.tablerow {
display: table-row;
border:1px solid black;
position: relative; // Not having any effect and causing the border to disappear!!
//position: absolute; // If set, rows overlap but the border displays
height: 40%; // Works only when set in pixels, doesn't work when set in percentage
}
There seems to be something going wrong somewhere, but I can't pinpoint the exact issue. Any assistance would be greatly appreciated!