拉伸隔离的细胞或最大宽度的表格

Question

我试图实现下表，

使用php如下

<?php
while($rowcustomer = mysql_fetch_array($querycustomer)){
    echo '<tr><td bgcolor="#FFFFFF" style="color: #CC3300;"><h2>'.$rowcustomer['cusname'].'</h2></td></tr>';
    echo '<tr><td bgcolor="#FFFFFF" style="color: #CC3300;"><h2>'.$rowcustomer['cusname'].'</h2></td></tr>';
    echo '<tr height="20">
    <td width="120" height="20" bgcolor="#FFFFFF"><h3>Invoice Date</h3></td>
    <td width="120" bgcolor="#FFFFFF"><h3 align="center">Invoice Number</h3></td>
    <td width="120" bgcolor="#FFFFFF"><h3 align="center">Invoice Amount</h3></td>
    <td width="120" bgcolor="#FFFFFF"><h3 align="center">Payed Amount</h3></td></tr>';
}           
?> 

但我得到以下内容

而不是我需要的，我怎样才能实现它？

Answer 1

快速回答，将colspan="4"添加到跨越所有列的td：

HTML

<td bgcolor="#FFFFFF" style="color: #CC3300;" colspan="4">

更长的答案:) - 让我们清理一些HTML：

示例小提琴 - Fiddle Link!

HTML

<table>
    <thead>
        <tr>
            <th colspan="4">Header</th>
        </tr>
        <tr>
            <th colspan="4">Header2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaaaa</td>
            <td>aaaaa</td>
            <td>aaaaa</td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>aaaaa</td>
            <td>aaaaa</td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <th>Invoice Date</th>
            <th>Invoice Number</th>
            <th>Invoice Amount</th>
            <th>Payed Amount</th>
        </tr>
    </tbody>
</table>

CSS - 添加额外的样式并抛弃width="120" bgcolor="#FFFFFF"

table {
    border-collapse: collapse;
}
td, th {
    border: solid 1px #CCC;
}