html - 列宽不均

Question

我正在尝试复制此表格格式。

但我好像做不到每个 td 的列宽不均匀，它也破坏了我的表格的形式这是我的代码:

<div class="CenterThings">
    <table class="CenterThings">
        <tr>
            <th colspan="3" style="background-color:black;color:white;">Job Quotation</th>
        </tr>
        <tr>
            <td style="width: 328px">Address:<asp:TextBox ID="TextBox2" runat="server" Height="16px" Width="255px"></asp:TextBox>
            </td>
            <td style="width: 219px">Contact#:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td style="width: 328px">
                Job Description:
                <asp:TextBox ID="TextBox3" runat="server" Width="194px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td style="width: 328px">
                Printing Process:
                <asp:TextBox ID="TextBox4" runat="server" Height="16px" Width="195px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <th colspan="3" style="background-color:black;color:white;">Specification</th>
        </tr>
        <tr>
            <td style="width: 328px">
                Quantity: 
            </td>
            <td style="width: 219px">
                Size:
            </td>
            <td>
                No.of pages inside: 
            </td>
        </tr>
        <tr>
            <td style="width: 328px">
                Material: 
            </td>
            <td style="width: 219px">
                Cover: 
            </td>
            <td>
                Inside: 
            </td>
        </tr>
    </table>
</div>

这是它的输出:我需要以某种方式复制第一张图片或以某种方式接近。

Answer 1

您可以使用嵌套表格，将整个表格放在一个 TD 中。这将使您的布局更加复杂。

<table id='main_table'>
  <tr>
    <td>
       <table id='inner_table'>
        </table>
      </td>
    </tr>
  </table>