问将表格中的列和行并排对齐以进行打印
EN

Stack Overflow用户

提问于 2012-11-06 13:54:00

回答 1查看 1.3K关注 0票数 0

我有一个表格网格布局，我已经设置了样式，可以打印，但是我在尝试将缩略图图像向左对齐，然后在缩略图旁边对齐两行时遇到了问题。

我不确定如何正确地使用表，因为我习惯于使用div。

我有下面的代码：- http://jsfiddle.net/nCTFe/

所以基本上第一行和第二行需要像第一张表一样，但在左边的图像旁边，我的一直坐在它下面！

任何帮助都是很好的，小提琴更好地证明了这一点！

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td width="30%" class="bottom_bdr stocklistItemImage">
                <img height="75" width="100" class="stocklist_thumb" 
                     border="2"  src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Funivia_Rote_Nase_alt.JPG/300px-Funivia_Rote_Nase_alt.JPG" 
                     alt="">
            </td>
        </tr>

        <tr>
            <td width="70%" class="vfeatures bdrBottom">
                <span style="font-weight:bold">FIRST LINE:</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
            </td>
        </tr>

        <tr>
            <td width="70%" class="bottom_bdr a_top stocklistItemDescription">
                <span style="font-weight:bold">SECOND LINE</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
            </td>
        </tr>
        <tr>
            <td class="" width="70%">&nbsp;</td>
        </tr>
    </tbody>
</table>

printing

html-table

html

css

音视频低代码开发方案最快1天上线

推出 TUICallKit 和 TUIRoomKit 低代码集成方案，最快1天接入在线教育、语聊房、在线客服等应用

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-11-06 14:05:05

您需要对HTML表的工作方式有一个基本的了解。<tr>表示“表格行”，或表格中单元格的水平对齐方式。

因此，为了获得图像右侧的文本，您需要将它们放在同一行中。但是，看起来您希望两行(第一行和第二行)都与图像在同一行中。为此，将第一个<td> (对于图像)上的rowspan设置为2，将第一行放在与图像相同的<tr>中，然后将第二行放在新的<tr>中。

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td width="30%" class="bottom_bdr stocklistItemImage" rowspan="2>
                    <img height="75" width="100" class="stocklist_thumb" border="2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Funivia_Rote_Nase_alt.JPG/300px-Funivia_Rote_Nase_alt.JPG" alt="">
                </td>
                <td width="70%" class="vfeatures bdrBottom">
                    <span style="font-weight:bold">FIRST LINE:</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
                </td>
            </tr>
            <tr>
                <!--No first cell here; it's already covered by the image td with the rowspan="2" -->
                <td width="70%" class="bottom_bdr a_top stocklistItemDescription">
                    <span style="font-weight:bold">SECOND LINE</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
                </td>
            </tr>
        </tbody>
    </table>