構造具有許多不均勻的行和列的表-HTML

Question

我想使用單表構造一個類似於快照中的表，以便在我要打印網頁時內容能夠正確對齊。 我怎樣才能做到這一點？ 這是我當前的代碼：

<table border="1" id="maintab">
    <tr>
    <td id="beg"> 
        <img src="http://placehold.it/60x60" alt="Company logo"/> 
        <h3> Venkateshwara <br /> Enterprises </h3>
        <p> Shed No. D-30, Industrial Estate, </p>
        <p> B.H. Road, Tumkur - 572 103, Karnataka </p>
        <p> Mob: 94803 77407, 98440 91647 </p>
        <p> TIN: 29690400291 </p>
    </td>

    <td> 
        <table id="mid"> 
            <tr>
                <td>
                    <h4> INVOICE </h4>
                    <p id="small"> Rule &#40;52A &amp; 173 of the Central Excise Rules 1984&#41; </p>
                </td>

                <td>
                    <h4 id="book"> BOOK COPY </h4>
                </td>
            </tr>
            <tr>
                <td colspan="2" id="addr">
                    <p id="sma"> Name and Address of the Consignee </p>
                    <p> Amalgamated BEan Coffee Trdg. Co. Ltd. </p>
                    <p> No. 9, 2nd Floor, 7th Cross, N. S. Palya </p>
                    <p> Bannerghatta Main Road, </p>
                    <p id="last"> Bangalore - 560 076 </p>
                    <p> <b> PARTY'S VAT No: </b> 2688367839 <b> CST No: </b> 87236 </p>
                </td>
            </tr>
            <tr>
                <td colspan="2" id="addr">
                    <p> Your Order No: PO/14/1060 </p>
                    <p> Order date: 04-02-2015 </p>
                </td>
            </tr>
        </table>
    </td>

    <td>
        <table id="end">
            <tr>
                <td> Date: 9-2-15 </td>
                <td> Sl. No. 057 </td>
            </tr>

            <tr> 
                <td> Date &amp; Time of Issue of Invoice </td>
                <td> 9-2-15 5.20 PM </td>
            </tr>

            <tr> 
                <td> Date &amp; Time of Removal of Goods </td>
                <td> 9-2-15 5.30 PM </td>
            </tr>

            <tr> 
                <td> Tariff Heading No. </td>
                <td> ------------------ </td>
            </tr>

            <tr> 
                <td> Exemption Notification </td>
                <td> ------------------ </td>
            </tr>

            <tr>
                <td> Sl. No. debit entry for duty in P.L.A./RG23 P.II </td>
                <td> ------------------ </td>
            </tr>
        </table>
    </td>
</tr>
</table>

如果無法使用單個表來完成，那么我至少想知道如何維護td的寬度和高度，以便在打印網頁時保持一致。 提前致謝！ :)

Answer 1

這是你想要的嗎..？？ 我用過colspan和rowspan 。 看起來像這樣。

試試這個代碼...

<style>
    .tablestyle {
        border: 2px solid;
        font-family: 'Arial Narrow', Arial, sans-serif;
    }
    .tablestyle td {
        border: 1px solid;
    }
    .tablestyle td h4 {
        margin-bottom: 0;
    }
    .colcenter {
        text-align: center;
    }
</style>
<table cellpadding="10" id="maintab" class="tablestyle">
    <tr>
        <td rowspan="6" class="colcenter">
            <img src="http://placehold.it/60x60" alt="Company logo"/> 
            <h3> Venkateshwara <br /> Enterprises </h3>
            <p> Shed No. D-30, Industrial Estate, </p>
            <p> B.H. Road, Tumkur - 572 103, Karnataka </p>
            <p> Mob: 94803 77407, 98440 91647 </p>
            <p> TIN: 29690400291 </p>
        </td>
        <td class="colcenter">
            <h4> INVOICE </h4>
            <p id="small"> Rule &#40;52A &amp; 173 of the Central Excise Rules 1984&#41; </p>
        </td>
        <td class="colcenter">
            <h4 id="book"> BOOK COPY </h4>
        </td>
        <td> Date: 9-2-15 </td>
        <td> Sl. No. 057 </td>
    </tr>
    <tr>
        <td colspan="2" rowspan="4">
            <p id="sma"> Name and Address of the Consignee </p>
            <p> Amalgamated BEan Coffee Trdg. Co. Ltd. </p>
            <p> No. 9, 2nd Floor, 7th Cross, N. S. Palya </p>
            <p> Bannerghatta Main Road, </p>
            <p id="last"> Bangalore - 560 076 </p>
            <p> <b> PARTY'S VAT No: </b> 2688367839 <b> CST No: </b> 87236 </p>
        </td>
        <td> Date &amp; Time of Issue of Invoice </td>
        <td> 9-2-15 5.20 PM </td>
    </tr>
    <tr> 
        <td> Date &amp; Time of Removal of Goods </td>
        <td> 9-2-15 5.30 PM </td>
    </tr>
    <tr>
        <td> Tariff Heading No. </td>
        <td> ------------------ </td>
    </tr>
    <tr> 
        <td> Exemption Notification </td>
        <td> ------------------ </td>
    </tr>
    <tr>
        <td colspan="2">
            <p> Your Order No: PO/14/1060 </p>
            <p> Order date: 04-02-2015 </p>
        </td>
        <td> Sl. No. debit entry for duty in P.L.A./RG23 P.II </td>
        <td> ------------------ </td>
    </tr>
</table>

Answer 2

桌子因其自身大小而臭名昭著。 最好的技巧是將div容器添加為每個td或th的唯一子代。 div容器將有效地保持寬度和高度，並且布局不會出現問題。

我必須說，除非您的中央頂部單元格如右表所示為一排高度，並且底部中央單元格與右側單元格類似地高了一行，否則一張桌子不會重新布局此布局。 如果是這種情況，那么您的第一列將是一個行距6，中間是行距4。

如果確實需要精確的布局，則需要一個具有3個單元格的外部表，其中中央和右側單元格均包含子表。

您也可以嘗試將3個區域渲染為左浮動塊項目，即div和2個表。 實際上，它們實際上是在狹窄的屏幕上垂直回流的。

Answer 3

要最小化調整大小：

1. 以英寸為單位設置每個表格的寬度。
2. 以英寸為單位設置每列的寬度。
3. 使用table-layout: fixed 。

HTML示例：

<table id="maintab">
  <col style="width: 2in">
  <col style="width: 4in">
  <col style="width: 2in">
...
  <table id="mid"> 
    <col style="width: 2in">
    <col style="width: 2in">
    <col style="width: 2in">

CSS示例：

#maintab, #mid {
  table-layout: fixed;
}

#maintab {
  width: 8in;
}

#mid {
  width: 6in;
}

小提琴