將兩個表格彼此相鄰

我有兩個我想並排放置的HTML表格。將兩個表格彼此相鄰

我已經看過以前的答案，他們提到你需要指定內聯塊並向左浮動。

下面是我的兩個表都有的例子。但是它仍然顯示在另一個表下面，爲什麼？

"<table style ='font-size: 10pt; float: left; display: inline-block; cellpadding='3'>"

來源

2016-11-30 mHelpMe

指定 – xszaboj

的寬度也刪除'style'和'='...之間的空格...並且'cellpadding'不是CSS的一部分，所以它應該是它自己的屬性 – LuudJacobs

'在這裏你去 – LuudJacobs

回答

不要在桌子上使用inline-block，因爲它會改變自己的行爲（如果你需要一個像vertical-align規則）。但是你可以使用float: left;並禁用之後的浮動。這裏是例子：jsFiddle

來源

2016-11-30 10:55:27 debute

_」不要在表格上使用內聯塊，因爲它會改變它的行爲（如果你需要像vertical-align這樣的規則）「_ - 是的，但你也必須在'float'後面清除'，不是嗎？ – Vucko

嗯，是的，你讓我:)我的意思是'vertical-align'，尤其是我應該在發佈之前重新閱讀我的答案，但是我希望OP發現它很有幫助。 – debute

你的錯誤是在這裏...

第一表格，你必須指定display:inline-block和第二臺使用float:left就像這樣......

以全碼查看:::


 

 
    <table border="1" style="display: inline-block;"> 
 
     <tr> 
 
      <td>Cell content</td> 
 
      <td>Cell content</td> 
 
      <td>Cell content</td> 
 
     </tr> 
 
    </table> 
 
    <table border=1 style="float:left;" cellpadding="3"> 
 
     <tr> 
 
      <td>Cell content</td> 
 
      <td>Cell content</td> 
 
      <td>Cell content</td> 
 
     </tr> 
 
    </table> 
 

 
<hr>

來源

2016-11-30 10:56:46

隨着經驗的狀態，不要設置樣式像float或display直接在表格元素上。這可能會導致意外的行爲，特別是處理不同版本的瀏覽器。而是使用div元素作爲表格容器並在容器上設置樣式。

<div class="table-container"><table></table></div> 
<div class="table-container"><table></table></div>

並設置樣式

.table-container { display: inline-block; vertical-align: top; }

來源

2016-11-30 10:58:38

你忘了inline-block;和cellpading

實例之間添加'：

<table style ='font-size: 10pt; float: left; display: inline-block;' cellpadding='3' border='1'> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table> 
 
<table style ='font-size: 10pt; float: left; display: inline-block;' cellpadding='3' border='1'> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table>

來源

2016-11-30 10:58:46 Luke

相關問題