1

This is how the display currently looks:

How It looks right now

This is how I want it to look:

How I want it to be

.d1{
  background:#F0F0F0;
  border: 1px solid #A4A4A4;
}


#designs input, #itemz input{
  height:19px;
  font-size: 15px;
}

#designs #fds_image {
  background-size: 190px 221px;
  height: 221px;
  width: 190px;
  overflow:hidden;
}

#designs #fds_image img{
  width: 190px;
}
<table id="designs" width="auto" align="center" border="0" bgcolor="#EBEBEB" cellspacing="5">
  <tbody>
    <tr>
      <td class="d1" name="item">
        <div id="fds_image">
          <button class="preview_switch">M</button>
        </div>
        <hr>
        <div class="bottom_bar">
          <button name="preview" data-original="m">Preview</button>
          <br>
          <tbody>
            <td class="d1" name="item">
              <div id="fds_image">
                <button class="preview_switch">M</button>
              </div>
        </div>
        <hr>
        <div class="bottom_bar">
          <button name="preview" data-original="m">Preview</button>

I tried to do many things and researched online, but for some reason, it is not working. How can I make the tables display side-by-side, like I've shown?

4
  • Assign display: inline-block; to the table?
    – matmik
    Jul 6, 2016 at 16:25
  • Still same position :-(
    – Un29898
    Jul 6, 2016 at 16:29
  • 1
    Your code structure is completely wrong. I don't mean that as a condemnation, but you have <tbody> with no </tbody>, you have another <tbody> nested inside a <div> nested inside a table cell... but no parent table for that <tbody> to be attached to...
    – Robert
    Jul 6, 2016 at 16:36
  • Thank you Ill fix it out :D
    – Un29898
    Jul 6, 2016 at 16:39

3 Answers 3

3

You can override the default display: table to inline-table.

table {
  display: inline-table;
}

Example of horizontally align multiple <table> elements.

body {
  text-align: center;
}
table {
  width: 100px;
  height: 200px;
  border-collapse: collapse;
  display: inline-table;
}
td {
  border: 1px solid grey;
}
tr:first-child {
  height: 100%;
}
<table>
  <tbody>
    <tr>
      <td>Content</td>
    </tr>
    <tr>
      <td><button>Button</button></td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <td>Content</td>
    </tr>
    <tr>
      <td><button>Button</button></td>
    </tr>
  </tbody>
</table>

2
1

You could try floating the tables.

table {
 float: left;
}
0

You can make a bigger table that holds both of your tables currently side by side.

<table style="margin: auto;">
<tbody>
<tr>
<td><!-- Your first table --></td>
<td><!-- Your second table --></td>
</tr>
</tbody>
</table>

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