html問題想在另一個桌子旁邊移動一張桌子

我有兩張桌子。一個在另一個之上。我想將底部表格移到頂部表格的右側。現在，當我運行服務器時，頂部桌子位於底部桌子上方。有沒有辦法將底部桌子移動到頂部桌子的右側？html問題想在另一個桌子旁邊移動一張桌子

<table> 
     <tr><th>Type</th><th>Quantity</th></tr> 
     </tr><td>Tape + Film</td><td>{{total_tape_and_film_items}}</td></tr> 
     </tr><td>Electrical Equipment</td><td>{{total_electrical_equipment_items}}</td></tr> 
</tables> 

<table> 
     <tr><th></th><th>Status</th><th>Quantity</th></tr> 
     <tr><td><a id="new_client" href='{% url tiptop.views.in_items client.pk%}'/>View</a></td><td>In</td><td>{{in_items|length}}</td</tr> 
     <tr><td><a id="new_client" href='{% url tiptop.views.out_items client.pk%}'/>View</a></td><td>Out</td><td>{{out_items|length}}</td</tr> 
     <tr><td><a id="new_client" href='{% url tiptop.views.empty_items client.pk%}'/>View</a></td><td>Empty</td><td>{{empty_items|length}}</td</tr> 
</table>

來源

2011-04-12 Shehzad009

變化<table>到<table style="float: left">

最後</table>後添加<div style="clear: both"></div>。這是爲了確保第二個表的右側沒有任何內容。

來源

2011-04-12 14:22:04

有沒有辦法讓你的方法在兩個表之間留出一些空間？兩張桌子都安靜地靠在一起。我想在它們之間留出一些空間。 – Shehzad009 2011-04-12 14:34:16

將'style =「float：left」'更改爲'style =「float：left; margin-left：10px」'。並將'10px'更改爲任何你喜歡的。 – 2011-04-12 17:45:54

設置兩個表有一個固定的寬度，然後使用CSS的float他們：

table { float:left; width:400px; }

來源

2011-04-12 14:22:46 shanethehat

像這樣的東西應該工作：

<div style="width: 400px;"> 

    <div style="width: 200px; float: left;"> 

     <table> 
       <tr><th>Type</th><th>Quantity</th></tr> 
       </tr><td>Tape + Film</td><td>{{total_tape_and_film_items}}</td></tr> 
       </tr><td>Electrical Equipment</td><td>{{total_electrical_equipment_items}}</td></tr> 
     </tables> 

    </div> 

    <div style="width: 200px; float: left;"> 

     <table> 
       <tr><th></th><th>Status</th><th>Quantity</th></tr> 
       <tr><td><a id="new_client" href='{% url tiptop.views.in_items client.pk%}'/>View</a></td><td>In</td><td>{{in_items|length}}</td</tr> 
       <tr><td><a id="new_client" href='{% url tiptop.views.out_items client.pk%}'/>View</a></td><td>Out</td><td>{{out_items|length}}</td</tr> 
       <tr><td><a id="new_client" href='{% url tiptop.views.empty_items client.pk%}'/>View</a></td><td>Empty</td><td>{{empty_items|length}}</td</tr> 
     </table> 

    </div> 

    <div style="clear: both;"></div> 

</div>

你應該，如果你的CSS移動到您的樣式表，而不是將其應用於生產。祝你好運。

來源

2011-04-12 14:23:28

爲什麼額外的'div's？ – tdammers 2011-04-12 14:24:55

爲了一致性，避免使用浮動表來支持浮動塊。 – 2011-04-12 14:26:56

它確實增加了兩個毫無意義的元素。 – tdammers 2011-04-12 14:32:55

如果您不必支持IE < 8，您可以在表上設置display: inline-block。這將使它們表現得像外部的內聯元素，但內部的塊級元素。您還需要顯式設置表格寬度以及包含區域的寬度，除非您希望第二個表格在沒有足夠空間時在第一個表格下方彈出。

來源

2011-04-12 14:25:52 tdammers

html問題想在另一個桌子旁邊移動一張桌子

回答

相關問題