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

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

html css

Html 当页面宽度减小时，如何保持两个表对齐？,html,css,Html,Css,我有一个小网页，我一直在工作的乐趣，但有一个不希望的结果有两个表默认显示为列对齐，如我所愿。它们都有100%的页面宽度，其中的单元格共享相同的指定宽度。最后一个单元格没有指定宽度，因此如果页面宽度增加，它可以扩展，从而使表格保持在页面宽度的100%。没有指定高度，因此细胞可以在需要时无限生长表1:  <table style="z-index:2;position:fixed;top:196px;margin-top:0px;marg

我有一个小网页，我一直在工作的乐趣，但有一个不希望的结果

有两个表默认显示为列对齐，如我所愿。它们都有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>

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


跟踪
歌曲
唱片艺术家
专辑
体裁
评级
评论

表2:

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

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


第1页，共11页
美国作家
哦，多么美好的生活啊
独立音乐
好

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

它的正常外观：

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

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

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

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

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

我使用的是Mozilla Firefox，但我更喜欢与五大浏览器兼容的答案：Internet Explorer、Mozilla Firefox、Google Chrome、Opera和Safari。页面经过光学处理，宽度大于1200px。如果您使用小于该值的浏览器窗口查看，则会出现一个水平滚动条。

我认为最好使用名为的jQuery插件

我将您的一些数据放入一个虚拟表中，这样您就可以看到它是如何工作的。注意HTML的顺序是

1,2,3,1,2,3

，但默认负载是数字排序，即

1,1,2,2,3,3

。有大量的选项可以使用DataTables进行探索；您可以关闭排序功能，或者为每个曲目指定一个索引号

为了保证将来链接的正常运行，此示例基于：

HTML:

我认为最好的办法是使用一个名为的jQuery插件

我将您的一些数据放入一个虚拟表中，这样您就可以看到它是如何工作的。注意HTML的顺序是

1,2,3,1,2,3

，但默认负载是数字排序，即

1,1,2,2,3,3

。有大量的选项可以使用DataTables进行探索；您可以关闭排序功能，或者为每个曲目指定一个索引号

为了保证将来链接的正常运行，此示例基于：

HTML:

我认为最好的办法是使用一个名为的jQuery插件

我将您的一些数据放入一个虚拟表中，这样您就可以看到它是如何工作的。注意HTML的顺序是

1,2,3,1,2,3

，但默认负载是数字排序，即

1,1,2,2,3,3

。有大量的选项可以使用DataTables进行探索；您可以关闭排序功能，或者为每个曲目指定一个索引号

为了保证将来链接的正常运行，此示例基于：

HTML:

我认为最好的办法是使用一个名为的jQuery插件

我将您的一些数据放入一个虚拟表中，这样您就可以看到它是如何工作的。注意HTML的顺序是

1,2,3,1,2,3

，但默认负载是数字排序，即

1,1,2,2,3,3

。有大量的选项可以使用DataTables进行探索；您可以关闭排序功能，或者为每个曲目指定一个索引号

为了保证将来链接的正常运行，此示例基于：

HTML:

是的，我不会使用两个单独的表格，而是坚持使用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>


跟踪
歌曲
唱片艺术家
专辑
体裁
评级
第1页，共11页
美国作家
哦，多么美好的生活啊
独立音乐
好

是的，我不会使用两个单独的表，而是坚持使用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>


跟踪
歌曲
唱片艺术家
专辑
体裁
评级
第1页，共11页
美国作家
哦，多么美好的生活啊
独立音乐
好

是的，我不会使用两个单独的表，而是坚持使用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>


跟踪
歌曲
唱片艺术家
专辑
体裁
评级
第1页，共11页
美国作家
哦，多么美好的生活啊
独立音乐
好

是的，我不会使用两个单独的表，而是坚持使用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>


跟踪
歌曲
唱片艺术家
专辑
体裁
评级
第1页，共11页
美国作家
哦，多么美好的生活啊
独立音乐
好

无论您希望使用多少表，“宽度”属性都不推荐使用。对于这两个表，您可以使用：

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

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

。。。你应该得到你需要的

无论您希望使用多少表，“宽度”属性都不推荐使用。对于这两个表，您可以使用：

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

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

。。。你应该得到你需要的

无论您希望使用多少表，“宽度”属性都不推荐使用。对于这两个表，您可以使用：

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

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

。。。你应该得到你需要的

无论您希望使用多少表，“宽度”属性都不推荐使用。对于这两个表，您可以使用：

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

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

。。。你应该得到你需要的

编辑您的帖子以包含代码，而不是代码的截图。谢谢。@redditor怎么了？正如我提到的，它拒绝显示为代码。@redditor是，这样当您向下滚动列表时，顶部表格的信息仍保留在原来的位置。@redditor第二个表格的示例代码不应关闭，因为它只是列表的顶部部分