Question

I am creating a table dynamically, and including some preformatted text from an xml file into it, but my table stretches to fit the whole content, instead i want to have table size fixed, a horizontal scroll can also work, please provide some solution.

Here is my code

$('#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

To give the contents fixed width, you’ll have to assign fixed width to the <pre> tag itself:

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

To make it relative to screen resolution, first calculate the desired width e.g. 1/5 of the screen width:

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

Then use this in the code:

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

Live test case: http://jsfiddle.net/C2GGf/