在调整大小时，如何保持两个表的列宽同步？ [英] How do you keep two tables' column widths in sync while resizing?

问题描述

我已经找了一点，似乎找不到一个体面的解决方案，不需要一些疯狂的javascript，

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

有没有办法用纯CSS完成这个？

任何帮助都是值得赞赏的。

解决方案

在CSS中绝对可行。只需在表，trs和tds上设置宽度，应用文字包装，并将表格布局设置为固定。最后一个设置使用定义的列宽，而不是由单元格内容的宽度确定。

 ＃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 =tb1border = 1> < tr> < td class =col1>标题1< / td> < td class =col2>标题2< / td> < td class =col3>标题3< / td> < td class =col4>标题4< / td> < / tr>< / table>< table id =tb2border =1> < tr> < td class =col1>内容00001< / td> < td class =col2>内容02< / td> < td class =col3>内容0000000000003< / td> < td class =col4>内容000000000000000000004< / td> < / tr>< / table>  

I've looked around a bit and can't seem to find a decent solution, that doesn't require some crazy javascript, to the following problem.

There are two separate tables in the example. The first one is just for the headers. The second is for the body. We need two tables because the requirement for this feature is that the body table be locally scrollable, meaning the headers need to remain visible as the table body scrolls. We cannot use any new fancy HTML 5 pivot tables because we have to support IE.

Is there a way to accomplish this with pure CSS? It doesn't have to be perfect, just as long as it looks decent that's all I need.

Any help is appreciated.

解决方案

Definitely doable in just CSS. Just set widths on both tables, trs, and tds, apply word-wrapping, and setting table-layout to fixed. This last setting makes it use the defined column widths, rather than be determined by the cell content's width.

#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>

这篇关于在调整大小时，如何保持两个表的列宽同步？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！