使用CSS定位表格

假設我有三個簡單的表格。如何讓表格在水平方向（而不是垂直方向）內聯，而只使用css？我可以使用表格來做，但是我想更好地學習CSS，如果可能的話，我想用css來做。我意識到這可能涉及添加一個div標籤或其他東西，這是好的，我只是不想使用表（用於學習的目的）。使用CSS定位表格

只是可以肯定我很清楚我想要什麼....當前的表顯示是這樣的：

table 
table 
table

，但我想表顯示是這樣的：

table table table

這裏是一些HTML與三張表and a JSfiddle讓我們開始。

<html> 
<head> 

<style type="text/css"> 

</style> 

</head> 
<body> 
<h3>table one</h3> 
<table border=1> 
<tr><th>field1</th><th>field2</th></tr> 
<tr><td>data</th><th>bla</td></tr> 
<tr><td>whooo</th><th>foo</td></tr> 
</table> 

<h3>table two</h3> 
<table border=1> 
<tr><th>field1</th><th>field2</th></tr> 
<tr><td>data</th><th>bla</td></tr> 
<tr><td>whooo</th><th>foo</td></tr> 
</table> 

<h3>table three</h3> 
<table border=1> 
<tr><th>field1</th><th>field2</th></tr> 
<tr><td>data</th><th>bla</td></tr> 
<tr><td>whooo</th><th>foo</td></tr> 
</table> 

</body> 
</html>

感謝大家的幫助。浮動：左側的作品。現在，我試圖找出如何做這樣的事情：

table table 
table table

來源

2011-08-19 cchampion

當代表任何表（水平或垂直，它並不重要）數據時，您通常不應該避免表。另一方面，您必須使用分區和跨度（這是語義上原始的HTML元素）來標記任何其他非表數據（當然，除列表外）。 –

使用

display: inline-block;

或

float: left;

來源

2011-08-19 01:49:30

的h3標籤的方式獲得，如果你這樣做：

table {display: inline-block;}

你有一個選項，把h3和table設置爲div s，然後對齊div s，或將h3 s替換爲caption s。

來源

2011-08-19 01:45:47 shinkou

只是包裝一個與 '浮動' 樣式設置爲留在每個表：

這樣的事情...

<div style="float:left><table></table></div>

來源

2011-08-19 01:55:57

您可以將元素浮動爲了在線顯示它們。例如，如果你想顯示在一行中的h3和table元素，你可以這樣做：

<html> 
    <head> 
    <style type="text/css"> 
     div { 
     float: left; 
     width: 20em; 
     margin: 1em; 
     background-color: green; 
     } 

    table { 
     width: 100%; 
    } 
    </style> 
    </head> 
    <body> 

    <div> 
     <h3>table one</h3> 
     <table border=1> 
     <tr><th>field1</th><th>field2</th></tr> 
     <tr><td>data</th><th>bla</td></tr> 
     <tr><td>whooo</th><th>foo</td></tr> 
     </table> 
    </div> 

    ... 

    </body> 
</html>

來源

2011-08-19 01:57:11 emboss

http://jsfiddle.net/5Nv4e/5/ – emboss

只有桌子和CSS

<html> 
<head> 

<style type="text/css"> 
table 
{ 
    float:left; 
    display:inline; 
} 
</style> 

</head> 
<body> 

<table border=1> 
<tr><th>field1</th><th>field2</th></tr> 
<tr><td>data</th><th>bla</td></tr> 
<tr><td>whooo</th><th>foo</td></tr> 
</table> 


<table border=1> 
<tr><th>field1</th><th>field2</th></tr> 
<tr><td>data</th><th>bla</td></tr> 
<tr><td>whooo</th><th>foo</td></tr> 
</table> 


<table border=1> 
<tr><th>field1</th><th>field2</th></tr> 
<tr><td>data</th><th>bla</td></tr> 
<tr><td>whooo</th><th>foo</td></tr> 
</table> 

</body> 
</html>

來源

2011-08-19 03:24:37

只與HTML的代碼的代碼：

<html> 
<body> 

<table> 
<tr> 
<td> 

<table border=1> 
<tr><th>field1</th><th>field2</th></tr> 
<tr><td>data</th><th>bla</td></tr> 
<tr><td>whooo</th><th>foo</td></tr> 
</table> 

</td> 
<td> 

<table border=1> 
<tr><th>field1</th><th>field2</th></tr> 
<tr><td>data</th><th>bla</td></tr> 
<tr><td>whooo</th><th>foo</td></tr> 
</table> 

</td> 
<td> 

<table border=1> 
<tr><th>field1</th><th>field2</th></tr> 
<tr><td>data</th><th>bla</td></tr> 
<tr><td>whooo</th><th>foo</td></tr> 
</table> 

</td> 
</tr> 

</body> 
</html>

來源

2011-08-19 14:39:35

使用CSS定位表格

回答

相關問題