Question

我试图制作一个包含所有列的表格，除了最后一列，它占用了一个未确定的宽度。在最后一列中，我有另一个表，其中包含更多内容，设置宽度我想要滚动。

对于具有高分辨率的用户，所有内容都将可见。对于分辨率较小的用户，我希望最后一列中的内容可滚动。

我要创建的示例：

enter image description here

我目前的代码：

<style>
table {
    border-collapse:collapse;
}

td {
    font-family:arial;
    font-size:11px;
    text-align:center;
    border:1px solid #cccccc;
    height:50px;
    vertical-align:middle;
}

table.innertable td {
    background-color:#eeeeee;
    border-top:0;
    border-bottom:0;
    border-left:0;
}

</style>

<table cellspacing="0" border="0" cellpadding="0" style="width:100%;">

<tr>
    <td style="width:100px;">&#8592; 100 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td>&#8592; The rest of the space &#8594;</td>
</tr>

<tr>
    <td style="width:100px;">&#8592; 100 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td>
        <div style="overflow-x:scroll;">
        <table cellspacing="0" border="0" cellpadding="0" class="innertable">
        <tr>
        <td style="width:200px;">&#8592; 200 px &#8594;</td>
        <td style="width:200px;">&#8592; 200 px &#8594;</td>
        <td style="width:200px;">&#8592; 200 px &#8594;</td>
        </tr>
        </table>
        </div>
    </td>
</tr>

</table>

Answer 1

如何限制宽度？

http://jsfiddle.net/PTjqL/4/＆lt; - 就像这样。

编辑：更改为<div style="overflow-x:scroll; width: 200px;">。我限制了div的宽度。如果你不限制它，它将尽可能覆盖最大尺寸，它永远不会溢出-x;）

Answer 2

编辑 - 注意，它似乎在Chrome和FF8中运行得很漂亮，但IE版本都没有。

但是，IE conditional可用于检测IE并使用小Javascript来检测视口大小并根据需要修改元素（并添加window.resize处理程序）。所以一切都不会丢失......

编辑2 - 好吧，MSDN @media docs似乎暗示它应该有效。例如，有一个几乎相同的例子。嗯...

编辑3 - 如果我从查询中删除and (max-width:1280px)，则文本在IE9中会变为蓝色。我怀疑它确实/应该有效，但还有其他事情发生（可能是怪异模式正在被触发？）。

这个似乎可以工作，但我当然不确定所有浏览器和版本是否都支持它。但是，当视口为overflow: scroll时，这样做会将div#scrollable添加到< 1280px。如果你在它自己的浏览器窗口中打开下面的链接（我正在使用FF8进行测试）并尝试调整它的宽度，你会看到蓝色文本打开和关闭，溢出被添加并带走。

有关一些示例和体面的描述，请参阅：

Using media queries with @import and @media

CSS媒体查询

<style type="text/css">

/* This is what I added as far as the conditional style. 
   Note, the blue text is only for effect. */

@media only screen and (max-width:1280px) {
    .innertable td {
        color: blue !important;
    }
    #scrollable {
        overflow-x: scroll !important;
    }
}

table {
    border-collapse:collapse;
}

td {
    font-family:arial;
    font-size:11px;
    text-align:center;
    border:1px solid #cccccc;
    height:50px;
    vertical-align:middle;
}

table.innertable td {
    background-color:#eeeeee;
    border-top:0;
    border-bottom:0;
    border-left:0;
}
</style>

HTML修改

<!-- Note the ID attribute -->
<div id="scrollable">
  <table cellspacing="0" border="0" cellpadding="0" class="innertable">
    <tr>
      <td style="width:200px;">&#8592; 200 px &#8594;</td>
      <td style="width:200px;">&#8592; 200 px &#8594;</td>
      <td style="width:200px;">&#8592; 200 px &#8594;</td>
    </tr>
  </table>
</div>

http://jfcoder.com/test/mediaquery.html

表列的动态溢出-x？

2 个答案: