Question

所以我有这个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/

Answer 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的有用链接

Answer 2

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

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

Answer 3

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

只需选择表1和表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/

如何在不同的div列和不同的行高中制作2个表具有相同的表大小

3 个答案: