對齊和格式化多個元素動態添加到錶行

Question

我試圖做一個greasemonkey userscript，我通過ajax請求添加一個div到表中。該表重複約700次這樣的模式：

<table id="table01" > 
<tr class = "row0"> 
    <td rowspan = "2" > 
     <img src = "url" > 
    </td> 
    <td> text1 </td> 
    <td style = "text-align: right;" > text2 </td> 
</tr> 
<tr class = "row1"> 
    <td> text3 </td> 
    <td style = "text-align: right;" > text4 </td> 
</tr> 

... 
... 
... 

</table> 

我不能設法插入div和並設置CSS定位，使它看起來就像圖像中： http://s24.postimg.org/wastsl5it/Sin_t_tulo.png 我怎樣才能做到這一點使用JavaScript或jQuery的？

在此先感謝

Answer 1

在這裏看到的輸出：

jsFiddle

我的解決辦法是用百分比工作。該頁面的寬度是100％。當元素達到100％時，它會強制下一個元素迴繞到下面的位置。並使用float，而不是text-align: right。我將所有內容設置爲float:left，並設置width，以便元素將環繞到下一行。

<table id="table01" > 
<tr class = "row0"> 
    <div style="width:20%; float:left; border: solid thin purple"> 
      <img src = "url" > 
    </div> 

    <div style="width:79%; float:left"> 
     <div style="width:49%; float:left; border: solid thin"> text1 </div> 
     <div style = "width: 49%; float:left; border: solid thin red"> text2 </div> 

     <div style="width: 98%; float:left; border: solid thin blue">Center</div> 

     <div style = "width: 48%; float:left; border: solid thin green"> text3 </div> 
     <div style = "width: 48%; float:left; border: solid thin orange"> text4 </div> 
    </div> 
</tr> 

<tr class = "row0"> 
    <div style="width:20%; float:left"> 
      <img src = "url" > 
    </div> 

    <div style="width:80%; float:left"> 
     <div style="width:50%; float:left"> text1 </div> 
     <div style = "width: 50%; float:left" > text2 </div> 

     <div style="width: 100%">Center</div> 

     <div style = "width: 50%; float:left"> text3 </div> 
     <div style = "width: 50%; float:left"> text4 </div> 
    </div> 
</tr> 

</table> 

注意着，被設置爲100％％的寬度<div>你有麻煩。所以它會佔用它的所有部分。另外，要知道<div>設置爲100％，不是佔頁面的100％。它佔據了其內部的<div>的100％百分比。這是你需要知道的另一件事。寬度相對於它們所在的元素。

添加了邊框，所以您可以真正看到所有內容的佈局，寬度需要更小，因爲邊框佔據了空間。因此，添加邊框的100％寬度超過了100％。所以你必須把寬度改成小一些，可能是99％。