HTML table like special layout using bootstrap
HTML
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div class="box">
<div class="row-fluid show-grid">
<div class="span4">
<div class="rowspan2">
<span class="valign-helper"></span>
a
</div>
<div class="rowspan2">
<span class="valign-helper"></span>
b
</div>
</div>
<div class="span4">
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
</div>
<div class="span4">
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
</div>
</div>
</div>
CSS
body {
margin: 50px;
}
.box {
width: 400px;
padding: 0 10px;
background-color: #000;
}
.show-grid [class*="span"] div {
margin-left: 0;
margin-top: 10px;
min-height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
background-color: #fff;
}
.show-grid [class*="span"] .rowspan2 {
height: 90px;
margin-bottom: 0;
}
.valign-helper {
height: 100%;
display: inline-block;
vertical-align: middle;
}