HTML CSS examples for CSS Widget:Div Table
Create a table with various column count using div
<html lang="en"> <head> <title>Lorem ipsum dolor sit amet, cons</title> <style> .table {<!--from www . j a va 2 s . co m--> display:flex; flex-direction:column; } #table1 { border:2px solid; } .row { border:2px solid; display:flex; flex-direction:row; } .column { height:100%; border-left:2px solid; width:100%; } .inner-col { background-color:Chartreuse; } .outer-col { background-color:yellow; } </style> </head> <body translate="no"> <div id="table1" class="table"> <div id="row1" class="row"> <div class="column outer-col"> Lorem ipsum dolor s </div> <div class="column outer-col"> Lorem ipsum dolor s </div> </div> <div id="table2" class="table"> <div class="row"> <div class="column inner-col"> Lorem ipsum dolor s </div> <div class="column inner-col"> Lorem ipsum dolor s </div> <div class="column inner-col"> Lorem ipsum dolor s </div> </div> <div class="row"> <div class="column inner-col"> Lorem ipsum dolor s </div> <div class="column inner-col"> Lorem ipsum dolor s </div> <div class="column inner-col"> Lorem ipsum dolor s </div> </div> </div> <div id="row2" class="row"> <div class="column outer-col"> Lorem ipsum dolor s </div> <div class="column outer-col"> Lorem ipsum dolor s </div> </div> </div> </body> </html>