HTML5中的自定义表格

时间:2015-11-09 11:33:08

标签: html5

我需要一张如图中的表格。我已经尝试过,但我无法完全按照自己的意愿行事。这是我写的代码:

<style type="text/css"> 
    .tg  {border-collapse:collapse;border-spacing:0;} 
    .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
    .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
    .tg .tg-yw4l{vertical-align:top} 
</style> 
    <table class="tg">   
    <tr>
            <th class="tg-yw4l" rowspan="2"></th>
            <th class="tg-yw4l"></th>
            <th class="tg-yw4l"></th>   
    </tr>   
    <tr>
            <td class="tg-yw4l"></td>
            <td class="tg-yw4l"></td>   
    </tr>   
    <tr>
            <td class="tg-yw4l"></td>
            <td class="tg-yw4l"></td>
            <td class="tg-yw4l"></td>   
    </tr> 
    </table>

1 个答案:

答案 0 :(得分:0)

如果您坚持使用表格

,则需要使用嵌套表来实现布局

f-statistic
table {
    width: 100%;
    border-collapse: collapse;
}

td, th {
    border: 1px solid #000;
    border-collapse: collapse;
    text-align: center;
}

.tg {
    height: 400px;
}

.tg table {
    height: 100%;
}