HTML/CSS表格放置

下面是我用於2x表格的代碼。有我已經刪除的PHP &結果。但我無法在一條線上獲得這些信息，而是彼此相鄰。HTML/CSS表格放置

我試圖對齊左/右，這使他們在2個單獨的行？我也試過漂浮，這也沒有幫助。

是否有人對我有意見？

HTML

<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table"> 
     <tr align="center"> 
     <td colspan="16" class="header"><center>Last 5 Received Transactions</center></td> 
     </tr> 
     <tr align="center"> 
     <td class="header"><center>Transaction ID</center></td> 
     <td class="header"><center>Sent To</center></td> 
     <td class="header"><center>Amount</center></td> 
     <td class="header"><center>Date</center></td> 
     </tr> 
</table> 
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table"> 
     <tr align="center"> 
     <td colspan="16" class="header"><center>Last 5 Sent Transactions</center></td> 
     </tr> 
     <tr align="center"> 
     <td class="header"><center>Transaction ID</center></td> 
     <td class="header"><center>Sent By</center></td> 
     <td class="header"><center>Amount</center></td> 
     <td class="header"><center>Date</center></td> 
     </tr> 
</table>

CSS：

table 
    { 
    border: #000000 1px solid; 
    background-color: #363636; 
    }

來源

2015-06-28 Zoltan

什麼是你的CSS？我的意思是你的CSS屬性是你上面提到的那個類。 – divy3993

對不起，我現在編輯。上述CSS是的類表 – Zoltan

可能重複的[HTML - 兩個表平鋪並排]（http://stackoverflow.com/questions/8917235/html-two-tables-horizontally-side-by-side） –

你也可以在你的CSS，如果你想添加一個類的左，右各表並定義彩車表格總是左右對齊。

table.left { 
    float: left; 
} 
table.right { 
    float: right; 
} 

<table width="40%" border="0" cellpadding="0" cellspacing="2" class="left"> 
    YOUR LEFT TABLE content 
</table> 
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="right"> 
    YOUR RIGHT TABLE content 
</table>

您不需要'表'類，因爲您可以將表標記用作選擇器。

來源

2015-06-28 20:38:33 katjam

嘗試增加顯示：內聯塊;

更新CSS

table 
{ 
border: #000000 1px solid; 
background-color: #363636; 
display:inline-block; 
}

WORKING:DEMO

來源

2015-06-28 20:24:10 divy3993

@Zoltan這是你想要的嗎？ – divy3993

浮不上display: table這是默認的表顯示性能工作。

你必須把display: block它爲了把它們飄浮

table { 
    border: 1px solid #000; 
    display: block; 
    float: left; 
    width: 40%; 
} 
table:first-child { 
    margin-right: 40px; 
}

Working Fiddle

來源

2015-06-28 20:29:46 VladNeacsu

HTML/CSS表格放置

回答

相關問題