你如何保留两张桌子＆＃39;调整大小时列宽是否同步？

Question

我看了一下，似乎找不到一个像样的解决方案，这不需要一些疯狂的JavaScript，以解决以下问题。

示例中有两个单独的表。第一个是标题。第二个是身体。我们需要两个表，因为对此功能的要求是主体表可以在本地滚动，这意味着当表体滚动时，标题需要保持可见。我们不能使用任何新的花哨HTML 5数据透视表，因为我们必须支持IE。

有没有办法用纯CSS实现这一目标？它不一定是完美的，只要它看起来不错，就是我所需要的一切。

Answer 1

这是使用Jquery的概念示例。 （你可以做香草，但需要更多的代码）

<table id="tb1" border="1">
        <tr>
            <td>Title 1</td>
            <td>Title 2</td>
            <td>Title 3</td>
            <td>Title 4</td>
        </tr>
    </table>

    <table id="tb2" border="1">
        <tr>
            <td>Content 00001</td>
            <td>Content 02</td>
            <td>Content 0000000000003</td>
            <td>Content 000000000000000000004</td>
        </tr>
    </table>

JS：

function SetSize() {
    var i = 0;
    $("#tb2 tr").first().find("td").each(function() {
        $($("#tb1 tr").first().find("td")[i]).width(
            $(this).width()
        );
        i++;
    });
}
$(window).resize(SetSize);
SetSize();

没有＆＃34;疯狂的javascript＆＃34; ：d
这是一个工作小提琴，有一些css让它看起来更好：http://jsfiddle.net/5mfVT/

Answer 2

在CSS中绝对可行。只需在table，trs和tds上设置宽度，应用自动换行，并将table-layout设置为fixed。最后一个设置使它使用定义的列宽，而不是由单元格内容的宽度决定。

#tb1 {     width: 80%;     }

#tb2 {     width: 80%;     }

#tb1 tr {     width: 100%;     }

#tb2 tr {     width: 100%;     }

.col1 {     width: 35%;     }
.col2 {     width: 35%;     }
.col3 {     width: 20%;     }
.col4 {     width: 10%;     }

#tb1, #tb2 {     table-layout: fixed;     }
#tb1 td, #tb2 td {     word-wrap: break-word;     }

<table id="tb1" border="1">
  <tr>
    <td class="col1">Title 1</td>
    <td class="col2">Title 2</td>
    <td class="col3">Title 3</td>
    <td class="col4">Title 4</td>
  </tr>
</table>

<table id="tb2" border="1">
  <tr>
    <td class="col1">Content 00001</td>
    <td class="col2">Content 02</td>
    <td class="col3">Content 0000000000003</td>
    <td class="col4">Content 000000000000000000004</td>
  </tr>
</table>

Answer 3

表格调整为尽可能小。您的标题表具有较窄的内容，因此可以在调整大小之前调整为较小的宽度 非Javascript解决方案是定义所有列的宽度，或者定义适合两个最小宽度中较大宽度的表的min-width属性。