1

Does anyone know how to make table layout like this?

enter image description here

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
mkoziol
  • 106
  • 6
  • 1
    If it absolutely, _has to be a table_, you can use the [colspan attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#attr-colspan) on the table cell (_td_). As Ceuning points out below, [tables aren't meant for layout](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html/84986#84986), so you may wish to use some *div*s with a grid layout instead. – Eric McCormick Mar 20 '15 at 15:42
  • it has to be table, i'm not using it for web layout – mkoziol Mar 20 '15 at 15:47

1 Answers1

2

Tables are not meant for that kind of stuff. But it's possible using "display:block;" on the td element.

<style>
td{
    float:left;
    display:block;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    background:lightblue;
    margin:0 2% 2% 0;
    padding:20px 10px;
}


<table width="600" cellpadding="0" cellspacing="0">
    <tr>
        <td width="75%">Test</td>
        <td width="21%">Test</td>
    </tr>    
    <tr>
        <td width="21%">Test</td>
        <td width="75%">Test</td>
    </tr>
</table>

See it in action: https://jsfiddle.net/gvqpb66r/

CoenFuze
  • 484
  • 2
  • 7