Positioning tables using CSS_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-29 08:21 出处：网络

Assume I have three simple tables. How do I make the tables be inline horizontally (instead of vertical) while only using css? I can do it using a table, however I am trying to learn css better and I

相关专题：css

Assume I have three simple tables. How do I make the tables be inline horizontally (instead of vertical) while only using css? I can do it using a table, however I am trying to learn css better and I would like to do it using css if possible. I realize that may involve adding a div tag or something and that is ok, I just do not want to use a table (for learning purposes).

Just to be sure I am clear what I want.... currently the tables display like this:

table
table
table

but I want the tables to display like this:

table table table

Here is some html with three tables and a JSfiddle to get us started.

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

Thanks for the help everyone. float:left works. Now i'm trying to figure out how to do something like this:

table table
table table

Use

display: inline-block;

float: left;

The h3 tags are getting in the way if you do this:

table {display: inline-block;}

You have an option putting the h3 and table sets in divs and then align the divs, or replace h3s with captions.

just wrap a with the 'float' style set to left on each table:

something like this...

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

You may float elements in order to display them inline. For example, if you want to display your h3 and table elements in one row you could use this:

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

A code only with tables and 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>

A code only with 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>