Pepe Pepe - 1 month ago 8
CSS Question

Table colspan fix

Under here two codepens. In each of them you'll notice a green area. In one of them this is done with a table, in the other one divs were used. Also notice the behavior when you resize your window.

Table codepen:http://codepen.io/anon/pen/Kmdca?editors=110 and div codepen:http://codepen.io/anon/pen/tDhIG?editors=110
So the competing parts are:

table codepen:

<table class="information_table">
<tr><td></td><td></td><td></td><td></td></tr>
<tr>
<td colspan="2"><span class="prodinfo_title">Auteur: </span>Onbekend</td>
<td><span class="prodinfo_title">Formaat: </span>37 x 23 cm</td>
<td><span class="prodinfo_title">Prijs: </span>1900</td>
</tr>
<tr>
<td colspan="2"><span class="prodinfo_title">Uitgever: </span>Pieter Jacob Paets Jan Moerentorf</td>
<td><span class="prodinfo_title">Jaar v. uitgave: </span>1646</td>
<td><span class="prodinfo_title">Aantal pg: </span>4 + 1265 +1 +468</td>
</tr>
</table>


vs

div codepen:

<div class="info_box">
<div class="row">
<div class="column big"><span class="prodinfo_title">Auteur: </span>Onbekend</div>
<div class="column"><span class="prodinfo_title">Formaat: </span>37 x 23 cm</div>
<div class="column"><span class="prodinfo_title">Prijs: </span>1900</div>
</div>
<div class="row">
<div class="column big"><span class="prodinfo_title">Uitgever: </span>Pieter Jacob Paets Jan Moerentorf</div>
<div class="column"><span class="prodinfo_title">Jaar v. uitgave: </span>1646</div>
<div class="column"><span class="prodinfo_title">Aantal pg: </span>4 + 1265 +1 +468</div>
</div>
</div>


What I want to achieve is that


  • the green area as shown in the table codepen is divided in 4 equal parts, in which the first column exists of 2 of these parts. Neither really solves this as the table codepen does not use the full available space and the div codepen does not automatically divide the space correctly.

  • The red text in the 2 green areas are on the same horizontal spot like in the div codepen when it is on its maximum width (this behaviour unless on small sizes, where 1 box jumps under the floated)

  • When resized all the info jumps as a whole under the floated div like in the table codepen. The div codepen does not do this correctly. Also 1 row has to stay 1 row, the div codepen also does not manage to do this

  • The red text in a row is on the same vertical height. The div codepen does not do this



So currently the table codepen is behaving best, except for the horizontally alligning of the red text in different tables and making optional use of the available space.

Answer

The final solution came from csstricks: http://css-tricks.com/forums/topic/colspan-problem/page/2/ . We dropped the table due to wrong semantics and managed to get the desired effect through lists: http://codepen.io/wolfcry911/pen/mJsrp

HTML

<ul>
     <li><h4>Auteur:</h4>Amelotto Della Houssaia</li>
     <li><h4>Formaat:</h4>/</li>
     <li><h4>Prijs:</h4>200</li>
     <li><h4>Uitgever:</h4>Pietro Del Martello</li>
     <li><h4>Jaar v. uitgave:</h4>0</li>
     <li><h4>Aantal pg:</h4>246+242</li>
</ul>

CSS

ul {
 margin: 10px 0 10px 100px;
 padding: 0;
 background: #6C9;
 overflow: hidden;
 position: relative;
 font-size: 0.8em;
 list-style: none;
  }

li {
 float: left;
 width: 25%;
 padding: 4px;
 box-sizing: border-box;
}

li h4 {
 color: #b02a0a;
 float: left;
 margin: 0 4px 0 0;
}

li:nth-child(3n+1) {
 width: 50%;
 clear: left;
}