所以我有这个2表,可以使用引导程序在2列div中的网页上显示。
如果另一个表的条目少于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。
答案 0 :(得分: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的有用链接
答案 1 :(得分:0)
<!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>
我不确定这是否是你想要的
答案 2 :(得分:0)
您可以通过计算每个表格的偏移高度,然后将剩余的偏移高度添加到另一个表格中,以编程方式更改表格的高度。
只需选择表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/