CODEWITHSUNDEEP
htmlcss
Doan Van Thang
Doan Van Thang

Reputation: 997

HTML,CSS — How to horizontally center two tables side by side

I read two topics about how to make 2 tables side by side but I don't know how to move them to center

    <div>
        <table style="float: left;margin-right:10%;">
            <tr>
                <td>abc</td>
            </tr>
        </table style="float: left">
        <table>
            <tr>
                <td>xyz</td>
            </tr>
        </table>
    </div>

sorry I'm not good at English

Upvotes: 2

Views: 3524

Answers (4)

Ankush Sachdeva
Ankush Sachdeva

Reputation: 17

Here it is .

 <div  style="display:flex;justify-content:center; align-items:center">
        <table style="float: left;margin-right:10%;">
            <tr>
                <td>abc</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>xyz</td>
            </tr>
        </table>
    </div>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

You can use flexbox on the container div, apply justify-content: center; to center them, remove the floats and use a margin on one of the tables to create a distance between them.

.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

table {
  border: 1px solid #555;
}
<div class="wrap">
        <table style="margin-right:10%;">
            <tr>
                <td>abc</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
        </table>
    </div>

Upvotes: 3

SimaKosmos
SimaKosmos

Reputation: 1

You should consider using one table with one row and two columns. If it doesn't meet your requirements, you can do it on a several ways:

  1. using flex-box (recommended)

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table {
  width: 100%;
  border: 1px solid #000;
  text-align: center;
}

table:first-child {
  margin-right: 10px;
}
<div class="wrapper">
  <table id="table-one">
    <thead>
      <tr>
        <th>Table 1 - Column 1</th>
        <th>Table 1 - Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>first</td>
        <td>second</td>
      </tr>
    </tbody>
  </table>
  <table id="table-two">
    <thead>
      <tr>
        <th>Table 2 - Column 1</th>
        <th>Table 2 - Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>first</td>
        <td>second</td>
      </tr>
    </tbody>
  </table>
</div>

  1. using inline-block

table {
  display: inline-block;
  border: 1px solid #000;
  text-align: center;
}

table:first-child {
  margin-right: 10px;
}
<div class="wrapper">
  <table id="table-one">
    <thead>
      <tr>
        <th>Table 1 - Column 1</th>
        <th>Table 1 - Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>first</td>
        <td>second</td>
      </tr>
    </tbody>
  </table>
  <table id="table-two">
    <thead>
      <tr>
        <th>Table 2 - Column 1</th>
        <th>Table 2 - Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>first</td>
        <td>second</td>
      </tr>
    </tbody>
  </table>
</div>

and so on...

Upvotes: 0

Lazar Ljubenović
Lazar Ljubenović

Reputation: 19764

Use flex-box.

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

table {
  background: red;
}
    <div class=container>
        <table style="float: left;margin-right:10%;">
            <tr>
                <td>abc</td>
            </tr>
        </table style="float: left">
        <table>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
        </table>
    </div>

Upvotes: 3

Related Questions