Question

我正在动态创建一个表，并将一些预先格式化的文本从xml文件中包含到其中，但是我的表会拉伸以适应整个内容，而我希望表格大小固定，水平滚动也可以使用，请提供一些解决方案。

这是我的代码

$('#detailTable').empty();
$('<div width="100%">')
.attr('id','dblistSpan')
.html('<div class="titleBlue">Configuration&gt;System&gt;DBList</div>'+
        '<table id="grid" style="border:#2F5882 1px solid;width:100%;overflow:hidden;"  cellspacing="1" cellpadding="1">'+
            '<tr style="color :#FFFFFF;background-color: #8EA4BB">'+
                '<th><b>DBlist'+
                '</b></th>'+
            '<tr>'+
            '<tr style="color :#2F5882;background-color: #EDF1F5;width:100%;overflow:hidden;">'+
                '<td style="width:100%;overflow:hidden;"><pre>'+dblist+
                '</pre></td>'+
            '<tr>'+
        '</table>'+                 
    '</div>')       
.appendTo('#detailTable');

Answer 1

要为内容指定固定宽度，您必须为<pre>标记本身指定固定宽度：

<pre style="width: 500px; overflow:scroll;">'+dblist+....

要使其相对于屏幕分辨率，首先计算所需的宽度，例如屏幕宽度的1/5：

var listWidth = parseInt(screen.width / 5, 10);

然后在代码中使用它：

<pre style="width:' + listWidth + 'px; overflow:scroll;">'+dblist+....

实时测试案例：http://jsfiddle.net/C2GGf/

如何修复td或表的宽度，使其不会伸展

1 个答案: