Geek Answers Handbook

How to use columns with div based table?

I would like a cell to intersect two columns with two cells below it. How to do this in CSS with elements <div>? It should be equivalent to:

<table>
  <tr>
    <td colspan="2">Major column</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
  </tr>
</table>

Please note that C1 and C2 do not have to be 50%. The value may vary depending on their contents. I also need all the elements in these cells, no matter how many rows there should line up the same way as in the table.

+5
source share
4 answers

" , C1 C2 50%. . , , ."

( CSS: "display: table", IE6 IE7).

, - CSS , "tr" "td" "div" , . "" , .

, !

0

:

<div class="main">
    <div class="topRow">Major column</div>
    <div class="leftCol">C1</div>
    <div class="rightCol">C2</div>
<div>

css, :

div.topRow {
  width:100%;
  clear:both;
}
div.leftCol {
  width:50%;
  float:left;
}
div.rightCol {
  width:50%;
  float:right;
}
+3

div, .

HTML:

<div> full width </div>
<div class="column50"> left </div>
<div class="column50"> right </div>

CSS

div.column50 {
    float: left;
    width: 50%;
}

, CSS . divs 50%, . 50% - , , .

+1

, , "" div IE6. , IE6 - , .

, ( , , , 1% - , .).

In addition, if you set the width, remember that any borders or margins that you set complement the width of the elements, so if you set two divs to 50% using a border or field, you get a line break.

0
source

More articles:


All Articles