將表格列和行彼此並排進行打印

我有一個表格網格佈局，我已經準備好進行打印，但是我遇到了一個問題，試圖將縮略圖圖像對齊到左側，然後沿着旁邊兩行到縮略圖。將表格列和行彼此並排進行打印

不知道如何正確地使用表對齊這種方式，因爲我習慣使用div。

所以基本上[一線和二線]需要像第一個表，但左側的圖像一起，此刻礦山保持坐在它的下面！

任何幫助將是偉大的，小提琴演示這更好！

<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>

來源

2012-11-06 John

您將希望對HTML表格的工作原理有所瞭解。 <tr>表示表格中單元格的「表格行」或水平表格。

所以，爲了讓文本在圖像的右側，你需要把它們放在同一行。但是，它看起來像你想兩個行（第一行和第二行）都與圖像在同一行。您可以通過在新<tr>第一<td>設置rowspan（用於圖像），以2，放置第一線在同一<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>

我在這裏更新您的提琴：http://jsfiddle.net/CjAMc/1/（我也不得不用70％的寬度刪除最後一個空白<td>）

此外，在你的提琴表格的佈局是一個爛攤子，你會遇到更多的問題。我強烈建議你學習表格如何工作，並從頭開始這個項目。

來源

2012-11-06 14:05:05

將表格列和行彼此並排進行打印

回答

相關問題