HTML — Two Tables Horizontally Side by Side

Question

I'm trying to display tables next to each other horizontally, but this is what I'm getting.
enter image description here

<tr>
<th>
      <span onclick="toggleDiv('favData', 'favDataImg')" style="cursor: hand;">Favorites <img   name="favDataImg" src="../images/minus.gif" /></span>
</th>
</tr>
<tr>
    <td style="width: 300px; text-align: left; padding-right: 30px;">
<div id="favData" style="display: block;">
<fieldset style="width: 240px;">
<legend>Favorites</legend>
<table border="0" align="left">

<input type="radio" name="publicRadio" value="Public" >Public: </input>

<select  name="publicDropDown">
<option value="Public Dropdown" selected="selected">Public Dropdown</option>
</select>

<br><br>
<input type="radio" name="userRadio" value="User" >User: </input>

<select  name="userDropDown">
<option value="User Dropdown" selected="selected">User Dropdown</option>
</select>

<br><br>
<input type="radio" name="customRadio" value="Custom" >Custom: </input>

</table>
</fieldset>


<fieldset style="width: 240px;">
<legend>Favorites</legend>
<table border="0" align="left">

<input type="radio" name="publicRadio" value="Public" >Public: </input>

<select  name="publicDropDown">
<option value="Public Dropdown" selected="selected">Public Dropdown</option>
</select>

<br><br>
<input type="radio" name="userRadio" value="User" >User: </input>

<select  name="userDropDown">
<option value="User Dropdown" selected="selected">User Dropdown</option>
</select>

<br><br>
<input type="radio" name="customRadio" value="Custom" >Custom: </input>

</table>
</fieldset>



</div>
</td>
</tr>

Is this your full code? If yes, you have to add <table>...</table> around the block (it doesn't fix the problem, but your code will look better). — Rob W, Commented Jan 18, 2012 at 20:57
If you used Yahoo... try with Google ;) Joke. Set your floats (float:) properly and use with it a positioning method position:relative;. — Roko C. Buljan, Commented Jan 18, 2012 at 20:57
well...this code is a include on another web page....thanks though — Doc Holiday, Commented Jan 18, 2012 at 21:09

Community · Accepted Answer · 2017-05-23 12:01:27Z

22

This answer is taken from Chris Baker's answer of a duplicate question. Please up vote his answer.

One can use float: left or display: inline-block depending on content and space:

<table style="display: inline-block">

<table style="float: left">

This page is already setup with the HTML to try out and see how it looks in the browser: http://jsfiddle.net/SM769/

Documentation

CSS display on MDN - https://developer.mozilla.org/en/CSS:display
CSS float on MDN - https://developer.mozilla.org/en/CSS/float

Example

<table style="float: left">
   <tr>
      <td>..</td>
   </tr>
</table>

<table style="float: left">
   <tr>
      <td>..</td>
   </tr>
</table>

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Jan 22, 2014 at 15:08

Nathan

8,5829 gold badges52 silver badges80 bronze badges

What if I want a bit of space in between the two tables - either horizontal or vertical space depending on whether the second table wraps? Padding doesn't work, because some email clients ignore padding.
– user1279887
Commented Aug 26, 2019 at 12:21
@user1279887 You could add a third table between the above two tables. In the <td>, you could put  . Make sure you add border=0 to the table to make it invisible.
– Nathan
Commented Aug 26, 2019 at 21:45

Add a comment |

SpoonNZ · Accepted Answer · 2012-01-18 20:56:23Z

12

I think you're missing a few lines of HTML from the start of your copy and paste, however what you'll want to do is add a float:left to the CSS of the first fieldset.

answered Jan 18, 2012 at 20:56

SpoonNZ

3,8091 gold badge21 silver badges25 bronze badges

Add a comment |

TylerH · Accepted Answer · 2019-11-04 16:47:28Z

6

try to add to your CSS file:

.table-wrapper {
    display:inline-flex;
}

I have tried with display: inline-table, with float: left, and other stuff, but not a single one worked for me.

edited Nov 4, 2019 at 16:47

TylerH

21.2k72 gold badges78 silver badges105 bronze badges

answered Dec 4, 2018 at 17:26

Visovan Mihai

4071 gold badge7 silver badges13 bronze badges

Add a comment |

Logan Serman · Accepted Answer · 2012-01-18 20:56:52Z

2

Add:

fieldset
{
    float: left;
}

to your CSS. I copied your HTML to http://jsfiddle.net/S3n6D/ and added that CSS. You can see the result there.

answered Jan 18, 2012 at 20:56

Logan Serman

29.7k27 gold badges104 silver badges143 bronze badges

tried adding <fieldset style="width: 240px; display: block; float: left;"> still on top each other
– Doc Holiday
Commented Jan 18, 2012 at 21:43

Add a comment |

Ihab Agha · Accepted Answer · 2012-01-18 21:04:17Z

1

You have to apply a CSS rule to your tables in order to follow the normal document float which is:

table{ float:left; }

or

<table style="float: left;">.........</table>

PS: Just make sure that this tag selector block won't affect any other tables that you don't them to be so, otherwise you are recommended to use ID or class selectors.

answered Jan 18, 2012 at 21:04

Ihab Agha

1371 silver badge6 bronze badges

tried adding <fieldset style="width: 240px; display: block; float: left;"> still on top each other
– Doc Holiday
Commented Jan 18, 2012 at 21:43

Add a comment |

Sergiy T. · Accepted Answer · 2012-01-19 13:55:04Z

1

Adding display: table-cell; to the tables may help. http://www.quirksmode.org/css/display.html And you may need to add wrapping div with display: table; or add that property to some element depending on your page structure.

answered Jan 19, 2012 at 13:55

Sergiy T.

1,4431 gold badge24 silver badges26 bronze badges

did'nt seem to help...this is frustrating
– Doc Holiday
Commented Jan 19, 2012 at 14:44
try display:inline-block;. often just works perfectly
– nonchip
Commented Sep 16, 2015 at 6:59

Add a comment |

Phani CR · Accepted Answer · 2015-09-16 06:44:15Z

<!DOCTYPE html>
<html>
<body>

<table style="float: left; border-collapse:collapse; " border=\"1px;\" >
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>


<table style="border-collapse:collapse; " border=\"1px;\">
  <tr>
    <td>Jill jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eveeve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>Johnjohj</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>

</body>
</html>

Harikrishnan K.N. · Accepted Answer · 2019-07-11 11:36:44Z

1

To show two tables side by side, you can add the below CSS:

table.table1, table.table2{
    width:49.8%;
    display: inline-table;
}

answered Jul 11, 2019 at 11:36

Harikrishnan K.N.

4,8702 gold badges18 silver badges28 bronze badges

Add a comment |

user3146843 · Accepted Answer · 2014-01-10 16:32:23Z

<!DOCTYPE html>

<html>
<head>
<title>tables sideXside2</title>
<style>

table, td  { border-width: 2px; border-style: solid; border-collapse: collapse; padding: 15px; color: #000000; text-align: center; }

table.pos_fixed1 { position:fixed; top:30px; left:10px; }

table.pos_fixed2 { position:fixed; top:30px; left:250px; }

table.pos_fixed3 { position:fixed; top:30px; left:490px; }

</style>

</head>
<body>

<table summary="" width="10%" class="pos_fixed1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

<table summary="" width="10%" class="pos_fixed2">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>

<table summary="" width="10%" class="pos_fixed3">
<tr><td>i</td><td>ii</td><td>iii</td></tr>
<tr><td>iv</td><td>v</td><td>vi</td></tr>
<tr><td>vii</td><td>viii</td><td>ix</td></tr>
</table>

</body>
</html>

8ctopus · Accepted Answer · 2022-06-17 10:14:53Z

Yet another way of doing it using display: inline-block

<html>
  <body>
    <table id="table1">
      <tr>
        <td>cell1</td>
        <td>cell2</td>
      </tr>
    </table>
    <table id="table2">
      <tr>
        <td>cell1</td>
        <td>cell2</td>
      </tr>
    </table>
  </body>
</html>

body {
  white-space: nowrap;
}

table {
  display: inline-block;
  box-sizing: border-box;
}

table#table1 {
  width: 40%;
  background: blue;
}

table#table2 {
  width: 60%;
  background: red;
}

For the full explanation, check https://uxengineer.com/inline-block-elements-100-percent-width/

Collectives™ on Stack Overflow

HTML — Two Tables Horizontally Side by Side

10 Answers 10

Not the answer you're looking for? Browse other questions tagged
html
css
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Not the answer you're looking for? Browse other questions tagged htmlcss or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
html
css
or ask your own question.