我正在开发一个 HTML5/jQuery Mobile/PHP 网站。该网站有多个单独的表，因为我决定将数据分解到多个页面( <div data-role="page"> )。这些页面填充了电影信息(导演、年份、标题)，但这无关紧要。
当用户单击其中一个标题时，表格将通过 jQuery 脚本按升序或降序排序。最初，当页面加载时，用户只能看到第一页(第一个表)，如下图所示。用户可以通过单击按钮并向左或向右滑动来浏览页面，从而看到都有自己尺寸的其他表格。
如果用户单击导演标题，表格将按导演排序。然而，随着数据的变化，列的宽度也会发生变化。
我可以将列的宽度定义为某个固定宽度，但在这种情况下这是不可能的，因为用户可以定义可见的列:例如，他可以创建一个新的列编写器，或者甚至去掉director列，在这种情况下固定宽度不能很好地工作。
我的问题是，我可以使其他表的列宽与第一个表(或其他表，为了概括起见)中的宽度相同吗？如果可以的话，有没有不依赖于javascript的解决方案？
网站的基本结构:
<body>
<div data-role="page" id="page-1">
<table>...</table>
</div>
<div data-role="page" id="page-2">
<table>...</table>
</div>
<div data-role="page" id="page-3">
<table>...</table>
</div>
...
</body>
最佳答案
由于我不了解您的任何 JavaScript，因此您必须相应地替换变量/数组。
迭代每个页面，获取该页面上的列的宽度。保存该列的最大宽度(跨页)
对于每个页面:
var colWidths = [];
for(var i=0, j=NumberOfPages; i<j; i++){
for(var k=0, l=NumberOfColumns; k<l; k++){
// check if the column is wider than the widest column for the previous pages
if(colWidths[k]===undefined || colWidths[k] < $(...).width() ){
// if so, change the widest width for that specific column to the current width
colWidths[k] = $(...).width();
}
}
}
注意:将 $(...) 替换为表列元素。您只需从每个页面获取 1 个表格列，因为表格内所有列的宽度相同。
然后，因为您希望所有内容最终都等于 100%，所以您需要找到每列占总数的百分比。
var totalpx = 0;
// get combined widths of all the widest columns
for(var i=0, j=colWidths.length; i<j; i++){
totalpx += colWidths[i];
}
// get percentage for each width from total
var percentages = [];
for(var i=0, j=colWidths.length; i<j; i++){
percentages.push(colWidths[i]/totalpx);
}
然后，您从百分比数组中为每列指定适当的百分比。
.width = percentages[i]
关于javascript - 使所有表的列与第一个表的列具有相同的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31101315/