Question

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

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

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

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

有什么建议吗？

Answer 1

我认为你需要这样做，所以每列1-8的宽度加起来都是100％。当你有了它时，它会用1-8列填满整个页面，然后确保你应用

overflow:auto;

每个人。如果将overflow：auto应用于每个都不起作用，请尝试将其应用于第9列。

您也可能需要将每个宽度设置为自动。

Answer 2

丢失'table-layout：fixed;'。

使用JQuery： 在文档就绪时，获取正文外部宽度（带边距），将其除以8，然后将结果注入8个第一个colomns宽度（基于像素）。

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

这是完整的解决方案（我用总计做了4次，重要的是：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/

Answer 3

你不能这样做：

td {
  width : 12.5%
}

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

Answer 4

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

无论实现如何，overflow CSS属性都是关键。

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

这是一个jsFiddle示例。我希望它有所帮助，并为您提供所需的信息。

修复了html表中8列到100％宽度的问题

4 个答案: