HTML table 布局问题，如何解决

Question

有谁知道如何制作这样的 table 布局？

Answer 1

表格不适用于此类内容。但是可以在 td 元素上使用 "display:block;"。

<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>

查看实际效果：https://jsfiddle.net/gvqpb66r/

HTML table 布局问题，如何解决

HTML table layout issue, how to do that

html

css

tablelayout