Question

我正在尝试提出一种解决方案来同步多个表的列宽，其中列宽不固定，但宽度的确定方式与单个表的宽度不同，没有指定宽度。也许能够将某些列声明为希望缩小到最小宽度，而其他列则希望扩展到最大宽度。

我根本没有找到一个好的解决方案。我最初尝试在onResize期间使用jQuery同步宽度...但是无论如何我都无法设置宽度而不会干扰大小计算。

JQuery（一般来说是DOM）似乎无法返回容器所需的最小宽度，就像大多数其他UI框架一样（啊，HTML，我爱你的方式，而不是）。如果我有这种能力，我会自己布置专栏。不会那么难。

有什么想法吗？

例如，无论单个单元格中的内容如何，我都希望同步这些表的列宽。

<table>
  <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td></tr>
  <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td></tr>
</table>
<table>
  <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td></tr>
  <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td></tr>
</table>

Answer 1

我写了一个函数来将所有表的列宽设置为与任何表中列的最宽版本相同。

function AlignMultipleTables(class_name)
{
    // Align tables with the specified class so that all columns line up across tables.

    // Find the max width of each column across all tables. Only look at 'th' or 'td' cells in the first row of each table.
    var col_widths = [];
    $("." + class_name).each(function(index, element) {
        $(element).find("tr:first th, tr:first td").each(function(index2, element2) {
            col_widths[index2] = Math.max(col_widths[index2] || 0, $(element2).width());
        });
    });

    // Set each column in each table to the max width of that column across all tables.
    $("." + class_name).each(function(index, element) {
        $(element).find("tr:first th, tr:first td").each(function(index2, element2) {
            $(element2).width(col_widths[index2]);
        });
    });
}

为所有表提供类似“align-to-widest”的类，然后像这样调用函数：

AlignMultipleTables("align-to-widest");

查看我的jsfiddle here.

同步表之间的表列宽度

1 个答案: