並排html表格：<table style =「float：left;」>不起作用

-1

我的目標是並排放置兩個表格。我遵循以下指導：https://stackoverflow.com/a/11690480/2402577 並排html表格：<table style =「float：left;」>不起作用

<table style="float: left;">

我的示例代碼：

<div class="container" id="coverpage"> 
    <div class="row"> 
    <table id="tableblock" class="display" width="100%" style="float:left"><caption><h3>Latest Blocks</h3></table> 
    <table id="tabletxs" class="display" width="100%" style="float:left"><caption><h3>Latest Transactions</h3></table> 
    </div> 
</div>

表輸出：

正如你所看到的表沒有地方並排。我不確定我做錯了什麼。我該如何解決這個問題？

有了寶貴的意見，它似乎工作，但現在桌子的高度是非常小的。完成更改：添加了<div class="col-md-10">，刪除了width：此方法有效，但現在表格高度不對稱且足夠長。

<div class="container" id="coverpage"> 
    <div class="row"> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">  
    <table id="tableblock" class="display"><caption><h3 style="color:black;">Latest Blocks</h3></caption></table> 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
    <table id="tabletxs" class="display"><caption><h3 style="color:black;">Latest Transactions</h3></caption></table> 
    </div> 
    </div> 
</div>

表輸出：

感謝您寶貴的時間和幫助。

來源

2017-08-14 Alper

由於您使用'class'屬性，請編輯您的問題，並添加CSS代碼。 –

我看到你正在使用'container'和'row'。這是否意味着你正在使用Bootstrap？因爲那會讓一切變得更容易。 –

旁註：'h3'不能在'caption'裏面。 –

這是你如何做到這一點的引導方式。它將在中間到大屏幕上並排顯示桌子，在小屏幕上顯示桌子。

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container" id="coverpage"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-sm-12"> 
 
     <table id="tableblock" class="table"> 
 
     <caption>Latest Blocks</caption> 
 
     <tr><td>cell</td></tr> 
 
     </table> 
 
    </div> 
 
    <div class="col-md-6 col-sm-12"> 
 
     <table id="tabletxs" class="table"> 
 
     <caption>Latest Transactions</caption> 
 
     <tr><td>cell</td></tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-14 10:36:36

當你在這裏運行這個腳本時，它會運行在一個小窗口中，你可以點擊右側的'Full page'鏈接在更大的窗口中看到它，這通常被稱爲Responsive Design @Avatar –

您已將表格寬度設爲100％;所以它會佔用它的全部寬度，雖然你已經給了float:left

我已經減少了你的餐桌寬度50％。

<div class="container" id="coverpage"> 
 
    <div class="row"> 
 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
     <table id="tableblock" class="display" width="50%" style="float:left"><caption><h3>Latest Blocks</h3></caption> 
 
    </table> 
 
    </div> 
 
    
 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
    <table id="tabletxs" class="display" width="50%" style="float:left"><caption><h3>Latest Transactions</h3></caption> 
 
    </table> 
 
    </div> 
 
    </div> 
 
</div>

希望這有助於。

來源

2017-08-14 10:14:42

它的工作原理！但表格的高度不夠長和不對稱，是否有可能使它們更長，請看我更新的問題。 @Bhavin Shah – Alper

如果你嘗試width: 50%;的風格，我認爲你可以達到你想要的。這是一個硬編碼的例子width: 50%;。

如果您使用引導程序，那麼有可用的類來定位GRID風格的東西。 Here you can read about it.

<!DOCTYPE html> 
 

 
<h1 style="float: left; width: 50%;">Table1</h1> 
 
<h1 style="float: right; width: 50%;">Table2</h1> 
 
<table id="table1" style="float: left; width: 50%;border: solid black 1px;"> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table> 
 

 

 

 

 
<table id="table2" style="float: left; width: 50%; border: solid blue 1px;"> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table>

來源

2017-08-14 10:16:26

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>abc</title> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet"> 
</head> 
<style> 
</style> 
<body> 

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<div class="container" id="coverpage"> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <table id="tableblock" class="table"> 
     <caption>Latest Blocks</caption> 
     <tr><td>cell</td></tr> 
     <tr><td>cell</td></tr> 
     <tr><td>cell</td></tr> 
     </table> 
    </div> 
    <div class="col-sm-6"> 
     <table id="tabletxs" class="table"> 
     <caption>Latest Transactions</caption> 
     <tr><td>cell</td></tr> 
     <tr><td>cell</td></tr> 
     <tr><td>cell</td></tr> 
     </table> 
    </div> 
    </div> 
</div> 

</body>

來源

2017-08-31 05:18:55 Lekhraj

並排html表格：<table style =「float：left;」>不起作用

回答

相關問題