我目前正在创建一个网站，并且遇到其中一个要求有问题，我需要创建一个具有以下格式但有多列的表格：
|-------------|
|Title |
|-------------|
|Long Text |
| |
| |
| |
| |
| |
| |
| |
|-------------|
|Image |
| |
| |
| |
| |
|-------------|
|Long Text 2 |
| |
| |
| |
| |
| |
| |
| |
|-------------|
问题是我希望这个重排，以便当屏幕太小时列堆叠，有点像引导网格，但我也需要行保持相同的高度。
现在我已经使用bootstrap网格做了类似的事情，但是行的高度不同，你可以在这里看到一个例子：
.ptp-col
{
min-width:25%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col ptp-col">
<table>
<tr><td><b>Title 1</b></td></tr>
<tr><td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at diam metus. Quisque vitae sem sit amet lorem malesuada congue. Sed varius lectus nulla, quis varius lacus pretium ut. Cras fermentum nec lacus et fermentum. Ut volutpat ligula id finibus molestie. Ut non vulputate ipsum, at bibendum purus. Morbi vel erat vitae magna condimentum bibendum non a nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur augue a massa pharetra ornare. Nullam rhoncus gravida quam at venenatis.</td>
</tr>
<tr><td><b>Image 1</b></td></tr>
</table>
</div>
<div class="col ptp-col">
<table>
<tr><td><b>Title 2</b></td></tr>
<tr><td>
Vestibulum scelerisque ipsum sed sapien elementum, vel pharetra lectus semper. Nulla nibh lectus, ornare tempus elit eget, hendrerit imperdiet mi. Cras pellentesque magna eu augue consequat, sed condimentum justo aliquam. Ut erat mi, vehicula ac dignissim vitae, consectetur vitae purus. Integer congue lectus mi, luctus aliquet nisl tempus eget. Sed suscipit nunc ac venenatis facilisis. Fusce eu tristique velit. Maecenas quis eros id felis fringilla cursus. Vivamus nisl velit, consectetur ac sapien vitae, ornare mollis metus.</td>
</tr>
<tr><td><b>Image 2</b></td></tr>
</table>
</div>
<div class="col ptp-col">
<table>
<tr><td><b>Title 3</b></td></tr>
<tr><td>
Mauris tincidunt neque ut orci viverra, vitae accumsan felis auctor. Donec fringilla mollis augue id porttitor. Praesent imperdiet blandit neque, id vehicula purus sagittis at. Vestibulum non viverra nisl, in porta lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam pellentesque orci ut suscipit porta. Cras eros diam, facilisis ac rutrum at, consequat sit amet nisi. Nullam consequat velit lorem, non cursus mi aliquam ac. Nam et fringilla arcu, vehicula aliquam ex. Etiam et sem in ipsum vestibulum tristique vitae eu purus. Maecenas nec nibh dictum, accumsan ipsum eu, elementum libero.</td>
</tr>
<tr><td><b>Image 3</b></td></tr>
</table>
</div>
<div class="col ptp-col">
<table>
<tr><td><b>Title 4</b></td></tr>
<tr><td>
In mollis risus ac interdum mollis. Phasellus in pulvinar dui. Maecenas est felis, euismod vitae laoreet mollis, pellentesque non dui. Fusce placerat lacinia quam vitae consectetur. Integer vel lorem faucibus, volutpat augue vel, fermentum arcu. Suspendisse sed auctor nisl, eu venenatis orci. Aenean suscipit arcu sit amet condimentum suscipit. Etiam varius nunc quam, sed lobortis dolor accumsan vitae. Nulla sodales euismod nisi, sit amet faucibus eros elementum non. Donec suscipit nisi in nisl eleifend suscipit. Nunc faucibus commodo mi, non lobortis nisl mollis a. Quisque convallis pulvinar eleifend. Sed id magna id mi vehicula mollis. Nam at condimentum purus.</td>
</tr>
<tr><td><b>Image 4</b></td></tr>
</table>
</div>
</div>
</div>
我也尝试过我在这里找到的方法：https://github.com/yesnoio/responsive-table
但是这有同样的问题，行不是正确的高度，因为它没有正确地分解行。这种方法的一个例子可以在这里找到：
table.responsive {
width: 100%;
}
table.responsive td .label {
display: none;
}
table.responsive th {
background-color: #ddd;
}
table.second {
margin-top: 5em;
}
@media screen and (max-width:640px) {
table.responsive thead {
display: none;
}
table.responsive tbody th,
table.responsive tbody td {
display: block;
}
table.responsive.first td span {
display: block;
}
table.responsive.first td .label {
background-color: #ddd;
font-weight: bold;
text-align: center;
}
table.responsive.second th {
margin-top: 0.5em;
}
table.responsive.second td {
border-bottom: 1px #ccc solid;
}
table.responsive.second td .label {
display: inline-block;
}
table.responsive.second td .data {
float: right;
font-weight: bold;
}
}<table class="responsive first">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label">Column 1</span>
<span class="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh urna, mollis vitae facilisis eu, ultricies non libero. Curabitur semper, elit quis tincidunt vehicula, ex turpis porttitor quam, sed hendrerit leo quam vel erat. Donec iaculis arcu pretium fermentum vulputate. Nam porttitor semper ullamcorper. Nunc ac ultrices sem. Nunc euismod orci sapien, ut faucibus turpis cursus a. Aenean tortor mauris, tincidunt vitae pharetra sed, semper ac ex. Praesent sit amet lorem viverra, tincidunt dolor non, gravida odio. Praesent accumsan ante a hendrerit porttitor. Cras fringilla nibh quis nibh hendrerit, a posuere eros consequat. Sed lorem leo, feugiat non mollis a, commodo eu nunc. Curabitur mattis dolor sit amet vulputate eleifend. Donec ultricies odio sapien, in maximus metus pulvinar et. Curabitur sed congue arcu, non sollicitudin sem. Nam et aliquet mauris.</span>
<span class="data"><b>This is an image</b></span>
</td>
<td>
<span class="label">Column 2</span>
<span class="data">Suspendisse potenti. Maecenas vitae turpis at sapien rhoncus accumsan. Cras convallis eros id risus sagittis, in sollicitudin est tempor. Maecenas et arcu ut urna lobortis posuere ac nec tellus. Nulla et turpis in risus pellentesque sollicitudin. In vel ante lectus. In condimentum, leo sed condimentum eleifend, massa purus tempus nisl, eu sodales felis augue luctus leo. Maecenas lacus velit, scelerisque eu quam et, ultrices euismod sapien. Nulla interdum ex est, ac faucibus orci suscipit vitae. Mauris vitae ipsum vel purus pulvinar rutrum. Aliquam erat volutpat. Pellentesque at tempor dui, vel efficitur orci.</span>
<span class="data"><b>This is an image</b></span>
</td>
<td>
<span class="label">Column 3</span>
<span class="data">Nunc nec elit diam. Nam arcu odio, luctus sed purus eget, tempor tempor sem. Integer in mauris mauris. Nullam molestie tincidunt nisi at porttitor. In tempus risus vel ligula ornare mattis. Cras nec rutrum metus. Aenean at tellus sed velit bibendum tempus. Mauris mollis felis iaculis nunc iaculis ultricies. Maecenas vestibulum ipsum a pellentesque porta. Vestibulum sed sem sed urna suscipit euismod a eget dui.</span>
<span class="data"><b>This is an image</b></span>
</td>
<td>
<span class="label">Column 4</span>
<span class="data">Cras eget nunc tortor. Curabitur mi purus, aliquam in neque vestibulum, molestie pellentesque dui. Aliquam ut lorem vitae arcu maximus mattis. Ut convallis ultricies nisi, a ornare mi molestie a. Pellentesque vel erat feugiat, sodales tortor vel, blandit nulla. Proin eget tellus at sapien suscipit commodo. Fusce nec nunc nec nibh viverra maximus ut in tellus. Donec fringilla velit augue, sit amet dapibus diam fringilla in. Etiam pharetra felis nisi, vitae maximus lectus tempus ac. Ut ultrices euismod pellentesque. Morbi eu porttitor orci. Nulla sollicitudin fringilla neque sed pharetra. Vestibulum condimentum pharetra nisi eget pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla maximus est et risus volutpat maximus.</span>
<span class="data"><b>This is an image</b></span>
</td>
</tr>
</tbody>
</table>
更新：我已经制定了一个JS解决方案，如下所示：
var currentColsPerTable = 0;
var colMinWidth = 200; //px
document.addEventListener('DOMContentLoaded', function() {
//Get Table
var tableDiv = document.getElementById("ResponsiveTable");
var table = tableDiv.children[0];
var colsArray = getTableColumnArray(table);
window.addEventListener('resize', function() {
reflowTable(colsArray, colMinWidth);
}, true);
});
function reflowTable(colsArray, colMinWidth) {
//Get Viewport Width and number of cols per table
var tableDiv = document.getElementById("ResponsiveTable");
var viewWidth = document.body.offsetWidth;
var colsPerTable = Math.floor(viewWidth / colMinWidth);
if (colsPerTable === 0) {
colsPerTable = 1;
}
if (colsPerTable != currentColsPerTable) {
//Create table
var newTableDiv = createTablesDivFromArray(colsArray, colsPerTable);
tableDiv.outerHTML = newTableDiv.outerHTML;
}
}
function getTableColumnArray(table) {
//Init Array
var cols = new Array(4);
for (var i = 0; i < cols.length; i++) {
cols[i] = new Array(3);
}
//Loop over each row and get cols
for (var i = 0; i < table.rows.length; i++) {
//Loop over cols and add to array
for (var j = 0; j < table.rows[i].cells.length; j++) {
cols[j][i] = table.rows[i].cells[j].outerHTML;
}
}
return cols;
}
function createTablesDivFromArray(columnArray, columnsPerTable) {
var div = document.createElement("div");
var rowCount = columnArray[0].length;
var tableNum = 0;
//Create table
for (var i = 0; i < Math.ceil(columnArray.length / columnsPerTable); i++) {
var table = document.createElement('table');
for (var j = 0; j < rowCount; j++) {
var tr = table.insertRow();
for (var k = 0; k < columnsPerTable; k++) {
//Insert cell
if ((tableNum * columnsPerTable) + k == columnArray.length) {
break;
}
tr.insertAdjacentHTML("beforeend", columnArray[(tableNum * columnsPerTable) + k][j]);
}
}
tableNum++;
div.appendChild(table);
}
div.id = "ResponsiveTable";
return div;
}td {
min-width: 200px;
}<div id="ResponsiveTable">
<table>
<tr>
<th>Inner Peace</th>
<th>Social Peace</th>
<th>Economic Peace</th>
<th>Political Peace</th>
</tr>
<tr>
<td>Those who believe and whose hearts find comfort in the remembrance of Allah. Aye! It is in the remembrance of Allah that hearts can find comfort.—The Holy Quran, 13:29</td>
<td>Verily, Allah enjoins justice and the doing of good to others; and giving like kindred; and forbids indecency and manifest evil, and wrongful transgression. He admonishes you that you may take heed.—The Holy Quran, 16:91</td>
<td>Nay, but you honour not the orphan, and you urge not one another to feed the poor,and you devour the heritage of the poor, and you love wealth with extreme love.—The Holy Quran, 89:18–21</td>
<td>Verily, Allah commands you to give over the trusts to those entitled to them, and that when you judge between men, you judge with justice. And surely excellent is what Allah admonishes you with! Allah is All-Hearing, All-Seeing.—The Holy Quran,
2:266</td>
</tr>
<tr>
<td>Image Here</td>
<td>Image Here</td>
<td>Image Here</td>
<td>Image Here</td>
</tr>
</table>
</div>