1

我知道这是一个简单的问题，但我还是有点困惑。

这是关于我的 HTML 表格的。我想让我的第 1 到第 8 列（<th>..）仅固定为 100% 宽度或 100% HTML 宽度视图，以及第 9 列的其余列等等，这是动态生成的，可以水平滚动。

例如，如果我有一个 9 列的表，当我加载我的页面时，第 1 列到第 8 列将是可见的，而第 9 列只能在我水平滚动时看到。

我已经使用了tale-layout:fixed;，但它仍然不适合第 1 列到第 8 列到我页面的 100%。如果有 10 列，看起来还可以，但是如果有很多列（比如 15 列），那是我的第 1 列到第 8 列缩小并且无法遵守我的 CSS 宽度值的时候。

有什么建议吗？

4

4 回答 4

0

失去“表格布局：固定；”。

使用 JQuery： 在文档准备好时，获取正文外部宽度（带边距），将其除以 8，并将结果注入到第 8 个列宽（基于像素）。

浏览器将为您完成剩下的工作。我建议将表格包含在包装 div 中，因此滚动不会影响所有页面。

这是完整的解决方案（我用total：4，important：3做了，但你需要改变它）

HTML：

<div id='Holder'>
<table id='Table'>
    <tr>
        <th id="0">Column Header</th>
        <th id="1">Column Header</th>
        <th id="2">Column Header</th>
        <th id="3">Column Header</th>
    </tr>
    <tr>
        <td>Some Text</td>
        <td>Some Text</td>
        <td>Some Text</td>
        <td>Some Text</td>
    </tr>
</table>
</div>

CSS：

#Holder
{
    width: 100%;
    overflow: auto;
}

JS：

var ImportantColumn = 3;
var TotalColumn = 4;

$(document).ready(function(){
var Width = $('body').outerWidth(true);
    for(var i=0; i< TotalColumn; i++)
        $('#'+i).width(Width/ImportantColumn);
    $('#Table').width((Width*TotalColumn)/ImportantColumn);
});

http://jsfiddle.net/NVZmN/2/

如果你想让它看起来更干净，请使用：（仅在 CSS 中更改） http://jsfiddle.net/NVZmN/3/

于 2013-08-27T14:49:10.997 回答
0

我认为您需要做到这一点，以便每列 1-8 的宽度加起来为 100%。当你拥有它时，它会用你的第 1-8 列填满整个页面，然后确保你申请

overflow:auto;

每个。如果将溢出：自动应用于每个都不起作用，请尝试将其仅应用于第 9 列。

您可能还必须将每个宽度设置为自动。

于 2013-08-27T14:47:27.583 回答
0

你不能这样做：

td {
  width : 12.5%
}

这应该使所有单元格成为父级总宽度的 1/8，即使它们超过 8 个。

于 2013-08-27T14:51:35.090 回答
0

你一定要用桌子吗？表应该用于语义数据。

不管实现如何，overflowCSS 属性都是关键。

如果你想要的只是一个可滚动的查看器，那么我建议使用 ul。通过下面我的实现，你需要给 ul 一个固定的宽度，计算 li 的宽度 padding+margin 总数的宽度。

这是一个jsFiddle示例。我希望它对您有所帮助并为您提供所需的东西。

于 2013-08-27T15:00:35.850 回答