Question

假设我有三个简单的表格。如何仅在使用css时使表格水平内联（而不是垂直）？我可以使用表格来做，但是我想更好地学习css，如果可能的话我想用css来做。我意识到可能涉及添加div标签或其他东西，这没关系，我只是不想使用表格（用于学习目的）。

为了确保我清楚我想要的东西......目前表格显示如下：

table
table
table

但我希望表格显示如下：

table table table

以下是一些包含三个表and a JSfiddle的html，以帮助我们开始。

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

感谢大家的帮助。 float：左边有效。现在我想弄清楚如何做这样的事情：

table table
table table

Answer 1

使用

display: inline-block;

或

float: left;

Answer 2

如果您执行此操作，h3标记会受到阻碍：

table {display: inline-block;}

您可以选择将h3和table设置放在div中，然后对齐div，或将h3替换为{{ 1}} S上。

Answer 3

只需将每个表格左侧的'float'样式设置为左侧：

像这样......

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

Answer 4

您可以浮动元素以便以内联方式显示它们。例如，如果您想在一行中显示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>

Answer 5

仅包含表格和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>

Answer 6

仅限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定位表

6 个答案: