Question

我想使用SINGLE TABLE构建一个快照中的表，以便在我想打印网页时内容正确对齐。我怎么能实现这个目标？这是我目前的代码：

<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的宽度和高度，以便在打印网页时保持不变。提前致谢！：） Snapshot

Answer 1

这是你想要的......？我使用了 colspan 和 rowspan 。它看起来像这样。

Output Table structure

试试这段代码......

<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

最小化调整大小：

以英寸为单位设置每个表的宽度。
以英寸为单位设置每列的宽度。
使用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;
}

<强> Fiddle

构造一个包含许多不均匀行和列的表 - HTML

3 个答案: