使用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

当代表任何表（水平或垂直，它并不重要）数据时，您通常不应该避免表。另一方面，您必须使用分区和跨度（这是语义上原始的HTML元素）来标记任何其他非表数据（当然，除列表外）。 –

答

使用

display: inline-block;

或

float: left;

答

的h3标签的方式获得，如果你这样做：

table {display: inline-block;}

你有一个选项，把h3和table设置为div s，然后对齐div s，或将h3 s替换为caption s。

答

只是包装一个与 '浮动' 样式设置为留在每个表：

这样的事情...

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

答

您可以将元素浮动为了在线显示它们。例如，如果你想显示在一行中的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>

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>

答

只与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>

使用CSS定位表格

相关推荐