How to align
and
on the same line

Question

I am trying to align and on the same horizontal line. This is the code I have so far, adopting suggestions from @Santa's Little Helper.

HTML:

<div class="table-holder left-table">
    <Table striped bordered hover></Table>
</div>
<div class="table-holder right-table">
    <Table striped bordered hover></Table>
</div>
<div class="table-holder left-table">
    <Table striped bordered hover></Table>
</div>
<div class="table-holder right-table">
    <Table striped bordered hover></Table>
</div>

CSS:

.table-holder {
    width:50%;
}
.left-table {
    float:left;

}
.right-table {
    float:right;
}
.table-holder table {
    width:100%;
}

This is the output I got:

I wonder how could I put first two tables in one line and last two tables in one line. Ideally, the table on the upper right hand side occupy the same space as the table on the upper left hand side.

Set some width to the divs. Also,
is a block element, so set them to display: inline; — Kaloyan Velichkov, Dec 03 '19 at 20:05
Hi Sebastian, I did the first one suggested. Everything now is align to the left. — Skipper Lin, Dec 03 '19 at 20:09
You mean, you want to have 2 tables on the same line, and then another 2 tables on the next line? — dw_, Dec 03 '19 at 20:09
you got correct output for what you wrote the CSS, please attach an image of your desired result. — Varun Sukheja, Dec 03 '19 at 20:11
offtopic, but have you looked at using Bootstrap v4? why even use table html elements, just div with .table class in bootstrap. and with bootstrap you can align easy using flex boxes — rfcdejong, Dec 03 '19 at 20:20

dw_ · Accepted Answer · 2019-12-03T20:55:11.547

0

There are many ways you could achieve this. You can try using floats. Method 1:

HTML:

<div class="table-holder left-table">
  <Table striped bordered hover></Table>
</div>
<div class="table-holder right-table">
  <Table striped bordered hover></Table>
</div>
<div class="clear"></div>
<div class="table-holder left-table">
  <Table striped bordered hover></Table>
</div>
<div class="table-holder right-table">
  <Table striped bordered hover></Table>
</div>

CSS:

.table-holder {
  width:50%;
}
.left-table {
  float:left;
}
.right-table {
  float:right;
}
.clear {clear:both;}
.table-holder table {width:100%;}

Demo

Method 2 (Flex):

.tables-container {
  display: flex;
  flex-wrap: wrap;
}

.tables-container > div {
  flex: 0 50%;
}
.tables-container table {
  width: 100%;
}

/* --- */
table {border:1px solid black;}
table th {border:1px solid red;}
html, body {
  margin:0;
  padding:0;
}

<div class="tables-container">
  <div>
    <table>
      <tr><th>1</th><th>2Z</th></tr>
    </table>
  </div>
  <div>
    <table>
      <tr><th>1</th><th>2D</th></tr>
    </table>
  </div>
  <div>
    <table>
      <tr><th>1</th><th>2B</th></tr>
    </table>
  </div>
  <div>
    <table>
      <tr><th>1</th><th>2</th><th>3</th></tr>
    </table>
  </div>
</div>

<div>
other content
</div>

edited Dec 03 '19 at 20:55

answered Dec 03 '19 at 20:12

dw_

1,707
1
7
13

Hi @Santa'sLittleHelper, thanks for your help. I made the following changes, but now the second, third, and fourth column on all on the right hand side of the screen. – Skipper Lin Dec 03 '19 at 20:17
@SkipperLin what UI library are you using? – dw_ Dec 03 '19 at 20:28
Hi @Santa'sLittleHelper, I did not think I use any specific UI library. – Skipper Lin Dec 03 '19 at 20:29
Hi @Santa'sLittleHelper, I just modified the question to reflect the changes using your suggestion. – Skipper Lin Dec 03 '19 at 20:40
@SkipperLin I've edited my post, and added another solution using Flex – dw_ Dec 03 '19 at 20:45
That's sweet! It worked greatly. By any chance, how could I keep the table on the top right hand side have the sane height as the table on the top left hand side? – Skipper Lin Dec 03 '19 at 20:48
Also updated my 1st way, should be working as well. – dw_ Dec 03 '19 at 20:49
@SkipperLin add `height:100%;` to `.tables-container table`. (Only using 2nd method) – dw_ Dec 03 '19 at 20:52
Hi @Santa'sLittleHelper, adding ```height:100%;``` did not work. It did not make the table on the top right corner as large as the table on the top left corner. It only shortens the gap between the tables on the top left and bottom left. – Skipper Lin Dec 03 '19 at 20:56
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/203558/discussion-between-santas-little-helper-and-skipper-lin). – dw_ Dec 03 '19 at 21:00

How to align and on the same line

1 Answers1

How to align
and
on the same line