Как расположить отдельные таблицы HTML, чтобы выглядеть как одна таблица

Question

У меня есть 2 логически отдельные таблицы: .table-a и .table-b. Я хотел бы иметь 2 разных table HTML-элемента для каждого из них.

Но я бы хотел расположить их рядом с некоторыми промежуточными / визуальными компонентами.

Однако я хотел бы расположить их так, чтобы они выглядели как 1 таблица (строки из таблицы-a визуально соответствуют строкам из таблицы-b) независимо от содержимого в обеих ячейках таблицы. Но я не хочу объединять их в одну таблицу, поскольку они не являются логически одной и той же таблицей, и я также хотел бы расположить некоторые другие элементы между ними.

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

Answer 1

Я думаю, что следующим образом вы можете достичь этого. Также имейте в виду, что строка должна находиться в строке с двумя разными таблицами, которые вы не должны допускать, чтобы в одной таблице была многострочная или в другой таблице одна строка, поэтому вам необходимо добавить следующий CSS в ячейки таблицы:

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>

Answer 2

использовать этот стиль

.container{ display: inline-flex; }

Answer 3

Я не знаю ваш стиль CSS, но я пытаюсь дать ответ. Ниже приведен код, который отображает обе таблицы рядом:

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

Хитрость заключается в том, чтобы установить для ваших таблиц значение inline, чтобы они могли размещаться с другими элементами в одной строке. Поэтому вы должны установить свойство display этого элемента. Существует значение inline-table, идеально подходящее для таблиц, поскольку значением по умолчанию является table (но помните, что мы хотим, чтобы элемент был встроенным).

Посмотрите здесь для получения дополнительной информации о свойстве display: https://www.w3schools.com/cssref/pr_class_display.asp

Но как мы можем добиться отсутствия интервалов между таблицами? Есть несколько «хитростей», чтобы сделать это. Я помещаю комментарии между тегом закрытия первой таблицы и тегом открытия второй таблицы. Это визуально удалить пробелы.

Теперь вы увидите «визуально соединенные» таблицы. Вы можете увидеть «двойную границу» между таблицами. Вы должны настроить это самостоятельно с помощью стилей CSS, потому что я не знаю, чего конкретно вы хотите достичь, но я думаю, что я ответил на ваш вопрос.

Просто дайте мне знать в комментариях.

РЕДАКТИРОВАТЬ: Как сказано в комментариях, мое решение не решает, как достичь одинаковой высоты строки для всех таблиц. Во всяком случае, мой ответ был слишком сложным для комментария. Я надеюсь, что нет понижения голосов: (