Fatal编程技术网
  • html/
  • Html 如何使两个不同div列和不同行高的表具有相同的表大小

Html 如何使两个不同div列和不同行高的表具有相同的表大小

html css twitter-bootstrap

Html 如何使两个不同div列和不同行高的表具有相同的表大小,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,因此，我在我的网页上使用bootstrap在一个2列div中显示了这个2表 第一个表包含4列，每行有一个按钮 第二个表仅包含数据 每个表最多可以有5行 每个表格的背景色为灰色（#F5） 如果另一个表的条目少于5个（或者由于按钮的原因，表1的行大小更大，所以两个表都有5个条目），我如何使这两个表具有相同的框大小（灰色背景），这是可能的吗 表标题1 第1栏 第2栏 第3栏 第4栏 表数据 表数据 表数据 按钮 表数据 表数据 表数据 按钮 表数据 表数据 表数据 按钮 表数据 表数据 表数据

因此，我在我的网页上使用bootstrap在一个2列div中显示了这个2表

  • 第一个表包含4列，每行有一个按钮
  • 第二个表仅包含数据
  • 每个表最多可以有5行
  • 每个表格的背景色为灰色（#F5）
如果另一个表的条目少于5个（或者由于按钮的原因，表1的行大小更大，所以两个表都有5个条目），我如何使这两个表具有相同的框大小（灰色背景），这是可能的吗


表标题1
第1栏
第2栏
第3栏
第4栏
表数据
表数据
表数据
按钮
表数据
表数据
表数据
按钮
表数据
表数据
表数据
按钮
表数据
表数据
表数据
按钮
表数据
表数据
表数据
按钮
显示完整列表
表标题2
第1栏
第2栏
第3栏
表数据
表数据
表数据
表数据
表数据
表数据
表数据
表数据
表数据
显示完整列表


文件
.桌子{
背景色：#F5！重要；
}
表标题1
第1栏
第2栏
第3栏
第4栏
表数据
表数据
表数据
按钮
表数据
表数据
表数据
按钮
表数据
表数据
表数据
按钮
表数据
表数据
表数据
按钮
表数据
表数据
表数据
按钮
显示完整列表
表标题2
第1栏
第2栏
第3栏
表数据
表数据
表数据
表数据
表数据
表数据
表数据
表数据
表数据
显示完整列表
我不确定这是否是您想要的

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

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

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


常量t1=document.getElementById（“表1”）；
const t2=document.getElementById（“表2”）；
可升高（t1，t2）；
函数提升表（t1，t2）{
如果（t1.offsetHeight>t2.offsetHeight）{
const td=document.querySelector（`${t2.id}tbody tr:last child td`）
td.style.paddingBottom=（t1.offsetHeight-t2.offsetHeight+11）+“px”；
返回；
}
const td=document.querySelector（`${t1.id}tbody tr:last child td`）
td.style.paddingBottom=（t2.offsetHeight-t1.offsetHeight+11）+“px”；
返回；
}
这是检查它的小提琴。
从表格中删除背景色

将表包装在两个
中，并使用css
flexbox
属性
拉伸
和
增长


拉伸
确保两个容器相等

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



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



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



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