如何使不同 div 列和不同行高的 2 个表具有相同的表大小答案

【问题标题】：How to make 2 tables in different div columns and with different row height has the same table size如何使不同 div 列和不同行高的 2 个表具有相同的表大小
【发布时间】：2021-01-13 21:52:35
【问题描述】：

所以我有这个 2 表显示在我的网页上使用引导程序的 2 列 div 内。

第一个表格包含 4 列，每行都有按钮
第二个表只包含数据。
每个表最多可以有 5 行
每个表格的背景颜色为灰色 (#f5f5f5)

如果另一个表的条目少于 5 个（或者即使它们都有 5 个条目，因为表 1 由于按钮而具有更大的行大小），我如何使 2 个表具有相同的框大小（灰色背景）有可能吗？

<div class="container">
    <div class="row">
        <div class="col-6">
            <h2>Table title 1</h2>
            <table class="table">
                <thead>
                    <tr>
                        <td>Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td><button class="btn btn-primary">Button</button></td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td><button class="btn btn-primary">Button</button></td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td><button class="btn btn-primary">Button</button></td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td><button class="btn btn-primary">Button</button></td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td><button class="btn btn-primary">Button</button></td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-block btn-primary">Show full list</button>
        </div>
        <div class="col-6">
            <h2>Table title 2</h2>
            <table class="table">
                <thead>
                    <tr>
                        <td>Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-block btn-primary">Show full list</button>
        </div>
    </div>
</div>

这是重现我的代码的 jsfiddle..

https://jsfiddle.net/97jsnq31/

【问题讨论】：

我已添加代码请检查我没有 jsfiddle 帐户

标签： html css twitter-bootstrap

【解决方案1】：

从表格中移除背景色

将表格包装在几个<div> 中，并利用css flexbox 属性stretch 和grow。

stretch 确保两个容器高度相同

grow 使表格容器（应用背景颜色的地方）占据标题和按钮之间的所有剩余空间。

您可能希望在按钮上留出一些边距，以便在灰色和按钮之间获得白色。

风格

<style>
    .flex-row{
        display: flex;
        align-items: stretch;
        }
    .flex-col{
        display: flex;
        flex-direction: column;
        }
    .flex-table{
        background: #f5f5f5;
        flex-grow: 1;
        }
</style>

html

<div class="container">

  <div class="row flex-row">       // added class flex-row
    <div class="col-6 flex-col">   // added class flex-col
      <h2>Table title 1</h2>
      <div class="flex-table">     // added div with background color
        <table class="table">
        ...
        </table>
      </div>
      <button class="btn btn-block btn-primary">Show full list</button>
    </div>

  <div class="row flex-row">       // added class flex-row
    <div class="col-6 flex-col">   // added class flex-col
      <h2>Table title 2</h2>
      <div class="flex-table">     // added div
        <table class="table">
        ...
        </table>
      </div>
      <button class="btn btn-block btn-primary">Show full list</button>
    </div>

</div>

还有一个fiddle

了解flex boxes的有用链接

【讨论】：

【解决方案2】：

您可以通过计算每个表格的偏移高度，然后将剩余的偏移高度添加到另一个表格，以编程方式更改表格的高度。

只需选择你的table1和table 2，然后调用我在下面创建的函数。

您需要在继续之前将 id 添加到表格中

<script>
const t1 = document.getElementById("table1");
const t2 = document.getElementById("table2");

raiseTable(t1,t2);

function raiseTable(t1, t2) {
   if (t1.offsetHeight > t2.offsetHeight) {
        const td = document.querySelector(`#${t2.id} tbody tr:last-child td`)
        td.style.paddingBottom = (t1.offsetHeight - t2.offsetHeight + 11) + "px";
        return;
   }
   const td = document.querySelector(`#${t1.id} tbody tr:last-child td`)
   td.style.paddingBottom = (t2.offsetHeight - t1.offsetHeight + 11) + "px";
   return;
}
</script>

这是检查它的小提琴。 https://jsfiddle.net/op37a9s1/2/

【讨论】：

我收到无法使用此代码读取 null 的属性“offsetHeight”：/
您是否将 id 添加到表格中？
id="table1" 在一张桌子上， id="table2" 在另一张桌子上
您是否在页面底部添加了脚本？我将编辑以添加所有代码。
我把小提琴发给你看看

【解决方案3】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <style>
        .table {
            background-color: #f5f5f5 !important;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row" height="100vh">
        <div class="col-6">
            <h2>Table title 1</h2>
            <table class="table" height="90%">
                <thead>
                    <tr>
                        <td>Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td><button class="btn btn-primary">Button</button></td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td><button class="btn btn-primary">Button</button></td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td><button class="btn btn-primary">Button</button></td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td><button class="btn btn-primary">Button</button></td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td><button class="btn btn-primary">Button</button></td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-block btn-primary">Show full list</button>
        </div>
        <div class="col-6">
            <h2>Table title 2</h2>
            <table class="table" height="90%">
                <thead>
                    <tr>
                        <td>Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                    </tr>
                    <tr>
                        <td>Table data</td>
                        <td>Table data</td>
                        <td>Table data</td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-block btn-primary">Show full list</button>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

我不确定这是不是你想要的

【讨论】：

hmm..看起来有点奇怪..是否可以保留原始行大小但填充空白以使其看起来像相同的框大小？？
@ErwinPlaza 我刚刚调整了高度；你可以玩弄它，直到找到你喜欢的东西
这是我想要的实际结果..jsfiddle.net/op37a9s1/2 但只使用css？这可能吗？
@ErwinPlaza 可能，但我不是 css 专家
您也应该将此部分添加到问题中