CODEWITHSUNDEEP
htmlcss
Doc Holiday
Doc Holiday

Reputation: 10254

HTML — Two Tables Horizontally Side by Side

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>

Upvotes: 21

Views: 93244

Answers (10)

8ctopus
8ctopus

Reputation: 3237

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/

Upvotes: 0

Visovan Mihai
Visovan Mihai

Reputation: 425

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.

Upvotes: 6

Harikrishnan K.N.
Harikrishnan K.N.

Reputation: 4930

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

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

Upvotes: 1

Phani CR
Phani CR

Reputation: 97

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

Upvotes: 1

Nathan
Nathan

Reputation: 8920

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

Example

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

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

Upvotes: 22

user3146843
user3146843

Reputation: 1

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

Upvotes: 0

Sergiy T.
Sergiy T.

Reputation: 1453

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.

Upvotes: 1

Ihab Agha
Ihab Agha

Reputation: 137

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.

Upvotes: 1

Logan Serman
Logan Serman

Reputation: 29860

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.

Upvotes: 2

SpoonNZ
SpoonNZ

Reputation: 3829

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.

Upvotes: 12

Related Questions