May 24, 2011

Table Like Structure of Div

There is very simple css code to make div which behave like a table but in reality its not a table. It is the composition of CSS on Div to make Div as Table

CODE

<div id="divContainer" style="width:600px; height: 100px">

        <div style="width:50%;height: 100%; float:left;">

                <div style="width:100%; height:25%; display:block; border: 1px solid black; border-bottom:none"></div>

                <div style="width:100%; height:25%; display:block; border: 1px solid black; border-bottom:none"></div>

                <div style="width:100%; height:25%; display:block; border: 1px solid black; border-bottom:none"></div>

                <div style="width:100%; height:25%; display:block; border: 1px solid black"></div>

        </div>

        <div  style="width:50%; height: 100%; float:left;">

                <div id="divWithPadding" style="width:100%; height:50%; display:block; border: 1px solid black; border-bottom:none; border-left:none; padding-top:1px"></div>

                <div style="width:100%; height:25%; display:block; border: 1px solid black; border-bottom:none; border-left:none"></div>

                <div style="width:100%; height:25%; display:block; border: 1px solid black; border-left:none"></div>

        </div>

</div>