CODEWITHSUNDEEP
htmlcss-tables
user3530168
user3530168

Reputation: 31

3 Column table using divs (to act like a <table>)

I need a 3 column table using div's.

It must be fluid and cover 100% of the width of the window.

The left column should be 50% of the width with the other two columns being 20% each and the remaining space used for cell padding.

Additionally I need to make sure that when a cell contents get word wrapped, every cell in that row is adjusted so that the heights match. (Act like it would using the <table> tag). I would like each row and column to have a border so every line of the table is clear. I hope someone can help.

I have looked and looked for the solution but so far it has eluded me.

Upvotes: 3

Views: 6671

Answers (1)

Scott Selby
Scott Selby

Reputation: 9580

See it working here JSFIDDLE

<div class="table">
   <div class="cell"></div>
   <div class="cell"></div>
   <div class="cell"></div>
</div>



.table{
position:relative;  /*so children div can use 100% height and not go over */
width:100%; /* as long as this div's parent is body it will take up whole screen */
height:250px; /*make whatever you want */
padding:8px; /* will make that spacing you wanted */
}


.table .cell{
width:20%;
height:100%;
background-color:#bbb;
display:inline-block; /*so they display inline */
}

.table .cell:first-of-type{
width:50%;
height:100%;
background-color:#ddd;
}

Upvotes: 3

Related Questions