Question

我有一个小网页，我一直在努力寻找它的乐趣，但是有一个不受欢迎的结果。

根据我的需要，默认情况下会有2个表格显示列对齐。它们都具有100％的页面宽度，并且其中的单元格共享相同的指定宽度。最后一个单元格没有指定宽度，因此如果页面宽度增加，它可以展开，从而使表格保持在页面宽度的100％。没有指定高度，因此如果需要，细胞可以无限增长。

表1：

<!-- box_sorting -->
<table style="z-index:2;position:fixed;top:196px;margin-top:0px;margin-left:auto;margin-right:auto;margin-bottom:0px;width:100%;min-width:1200px;background-color:#CCC;text-align:center;vertical-align:middle;font:12px Arial, Helvetica, sans-serif;color:#333;word-wrap:break-word;border-top:solid;border-left:solid;border-size:1px;border-color:#CCC" align="center" cellpadding="0" cellspacing="0">
 <tr>
    <td width="75">Track</td>
    <td width="300">Song</td>
    <td width="300">Album Artist</td>
    <td width="300">Album</td>
    <td width="100">Genre</td>
    <td width="75">Rating</td>
    <td>Comments</td>
  </tr>
</table>

表2：

<!-- box_tracklisting -->
<table style="z-index:1;position:relative;top:216px;margin-top:0px;margin-left:auto;margin-right:auto;width:100%;min-width:1200px;text-align:center;vertical-align:middle;font:12px Arial, Helvetica, sans-serif;color:#333;word-wrap:break-word;border-left:solid;border-size:1px;border-color:#CCC" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="75">1 of 11</td>
    <td width="300"><a href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/67810795&amp;color=ff5500&amp;auto_play=true&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false" target="player">Believer</a></td>
    <td width="300">American Authors</td>
    <td width="300">Oh, What A Life</td>
    <td width="100">Indie</td>
    <td width="75">Good</td>
    <td></td>
  </tr>

我遇到的问题是，如果浏览器宽度减小，顶部表会缩小太多，并且不再与底部表格对齐。我该如何防止这种情况？

看起来如何正常：

proper

浏览器窗口宽度减少时的外观：

improper

我正在使用Mozilla Firefox，但我更喜欢与5种主流浏览器兼容的答案：Internet Explorer，Mozilla Firefox，Google Chrome，Opera和Safari。该页面被选择以宽度大于1200px进行查看。如果您使用小于该浏览器窗口的浏览器窗口查看它，则会有一个水平滚动条。

Answer 1

我认为最好的办法就是使用一个名为 DataTables

的jQuery插件

我已将部分数据放入虚拟表中，以便您了解其工作原理。请注意，HTML的顺序为1,2,3,1,2,3，但默认负载是按数字排序，即1,1,2,2,3,3。有许多选项可供DataTables探索;您可以关闭排序功能，或为每个轨道指定索引编号。

<强> http://jsfiddle.net/kDvp5/

为了将来的链接，这个示例基于：http://www.datatables.net/examples/basic_init/scroll_y.html

HTML：

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
    </tbody>
</table>

JS：

$(document).ready(function() {
    $('#example').dataTable( {
        "scrollY":        "200px",
        "scrollCollapse": true,
        "paging":         false
    } );
} );

Answer 2

是的，我不会使用两个单独的表，并坚持使用TH标头的传统布局。如果您想要修复它，只需将位置设置为固定：

<tr style="position: fixed;">
    <th width="75">Track</th>
    <th width="300">Song</th>
    <th width="300">Album Artist</th>
    <th width="300">Album</th>
    <th width="100">Genre</th>
    <th width="75">Rating</th>
</tr>
<tr>
    <td width="75">1 of 11</td>
    <td width="300"><a href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/67810795&amp;color=ff5500&amp;auto_play=true&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false" target="player">Believer</a></td>
    <td width="300">American Authors</td>
    <td width="300">Oh, What A Life</td>
    <td width="100">Indie</td>
    <td width="75">Good</td>
    <td></td>
</tr>

Answer 3

无论您希望使用多少个表，都不推荐使用“width”属性。您可以使用colgroup代替两个表：

<colgroup>
    <col style="width: 75px;" />
    <col style="width: 300px;" />
    <col style="width: 300px;" />
    <col style="width: 300px;" />
    <col style="width: 100px;" />
    <col style="width: 75px;" />
    <col />
</colgroup>

将colgroup添加到每个表的开头，<table>标记与您的第一个<tr>之间。应该在所有浏览器中统一工作。您还可以同时使用CSS类并为两个表分配列宽，这样可以在以后更容易地更改它们。

在HTML中，在两个表中：

<table>
    <colgroup>
        <col class="col1" />
        <col class="col2" />
        <col class="col3" />
        <col class="col4" />
        <col class="col5" />
        <col class="col6" />
        <col />
    </colgroup>
    <tr>
        <etc....>

然后，在你的CSS中：

.col1 { width: 75px; }
.col2 { width: 300px; }
.col3 { width: 300px; }
.col4 { width: 300px; }
.col5 { width: 100px; }
.col6 { width: 75px; }

......应该能满足你的需求。

当页面宽度减小时如何保持两个表对齐？

3 个答案: