CODEWITHSUNDEEP
htmlcsshtml-table
Nas
Nas

Reputation: 1121

How to position separate html tables to look like a single table

I have 2 logically separate tables: .table-a and .table-b. I would like to have 2 different table HTML elements for each of them.

But I would like to position them side by side with some margin/visual components in between.

However, I would like to position them so that they look like 1 table (rows from table-a visually match rows from table-b) regardless of the content in both table cells. But I do not want to merge them in a single table as they are not logically the same table and I would also like to position some other elements in between.

<div class="container">
        <table class=“table-a”>
            <thead>
            <tr>
                <th>Table A column</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Table A row 1</td>
            </tr>
            <tr>
                <td>Table A row 1</td>
            </tr>
            </tbody>
        </table>
        <table class=“table-b”>
            <thead>
            <tr>
                <th>Table B column</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Table B row 1</td>
            </tr>
            <tr>
                <td>Table B row 1</td>
            </tr>
            </tbody>
        </table>
    </div>

Upvotes: 0

Views: 2542

Answers (3)

Behnam akbari
Behnam akbari

Reputation: 51

use this style

.container{ display: inline-flex; }

Upvotes: 0

Hanif
Hanif

Reputation: 3797

I think following way you can achieve it. Also keep it mind to keep the row inline with two different table you should not allow in one table multi line or other table single line so you need must add following CSS in table cells:

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;


html, body {
  margin: 0;
  padding: 0;
}
.container {
	display:flex;
}
.table-a,
.table-b {
	display:inline-block;
	border-collapse:collapse;
	vertical-align:top;
}
.table-b {
	margin-left:-1px;
}
.table-a th,
.table-a td,
.table-b th,
.table-b td {
	border:1px solid #ddd;
	padding:4px;
	vertical-align:top;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}
<div class="container">
    <table class="table-a">
        <thead>
        <tr>
            <th>Table A column</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Table A row 1</td>
        </tr>
        <tr>
            <td>Table A row 1</td>
        </tr>
        </tbody>
    </table>
    <table class="table-b">
        <thead>
        <tr>
            <th>Table B column</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Table B row 1</td>
        </tr>
        <tr>
            <td>Table B row 1</td>
        </tr>
        </tbody>
    </table>
</div>

Upvotes: 1

FonzTech
FonzTech

Reputation: 408

I don't know your CSS styling, but I'm trying to give an answer. Below there is the code which displays both tables side by side:

<style>
.table-a, .table-b {
    border: 1px solid black;
    display: inline-table;
}
</style>
<div class="container">
    <table class="table-a">
        <thead>
        <tr>
            <th>Table A column</th>
        </tr>
        <thead>
        <tbody>
        <tr>
            <td>Table A row 1</td>
        </tr>
        <tr>
            <td>Table A row 1</td>
        </tr>
        </tbody>
    </table><!--
    --><table class="table-b">
        <thead>
        <tr>
            <th>Table B column</th>
        </tr>
        <thead>
        <tbody>
        <tr>
            <td>Table B row 1</td>
        </tr>
        <tr>
            <td>Table B row 1</td>
        </tr>
        </tbody>
    </table>
</div>

The trick is to set your tables to be inline, so they can rest with other elements on the same line. So you have to set the display property of that element. There is a inline-table value, ideal for tables, because the default value is table (But remember, we want the element to be inline).

Have a look here for further explanation on the display property: https://www.w3schools.com/cssref/pr_class_display.asp

But how can we achieve no spacing between tables? There are some "tricks" to do this. I put comments between the close tag of the first table and the open tag of the second table. This is remove the whitespace visually.

Now you will see "visually-joined" tables. You may see "double border" between tables. You have to adjust this yourself with CSS styling, because I don't know what you want to achieve specifically, but I think I have answered your question.

Just let me know in the comments.

EDIT: As said in the comments, my solution does not solve how to achieve same line height for all the tables. Anyway, my answer was too complex for a comment. I hope for no downvote :(

Upvotes: 1

Related Questions