Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This can be done with standard HTML, CSS and a bit of javascript. It can be made to degrade gracefully for clients with javascript turned off too. By that I mean, they'll just see the original table, unmodified by scrollbars. Try something like this:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; table { width: 100%; border-collapse: collapse; } td { border: 1px solid black; } .scrollingTable { width: 30em; overflow-y: auto; } &lt;/style&gt; &lt;script type="text/javascript"&gt; function makeTableScroll() { // Constant retrieved from server-side via JSP var maxRows = 4; var table = document.getElementById('myTable'); var wrapper = table.parentNode; var rowsInTable = table.rows.length; var height = 0; if (rowsInTable &gt; maxRows) { for (var i = 0; i &lt; maxRows; i++) { height += table.rows[i].clientHeight; } wrapper.style.height = height + "px"; } } &lt;/script&gt; &lt;/head&gt; &lt;body onload="makeTableScroll();"&gt; &lt;div class="scrollingTable"&gt; &lt;table id="myTable"&gt; &lt;tr&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Here is some long text that should wrap: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;blah&lt;/td&gt; &lt;td&gt;blah&lt;/td&gt; &lt;td&gt;blah&lt;/td&gt; &lt;td&gt;blah&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;td&gt;blah blah&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;blah&lt;/td&gt; &lt;td&gt;blah&lt;/td&gt; &lt;td&gt;blah&lt;/td&gt; &lt;td&gt;blah&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This was tested in Firefox, Chrome and IE 7, but it should work all modern browsers. Note that it doesn't matter how tall the content of each row is, or how much padding each cell has. If you don't want to use border-collapse:collapse on your table, then you'll have to add code in the for loop to take cellspacing into account.</p> <p>If you have thicker borders, then replace the javascript function with this one:</p> <pre><code>function makeTableScroll() { // Constant retrieved from server-side via JSP var maxRows = 4; var table = document.getElementById('myTable'); var wrapper = table.parentNode; var rowsInTable = table.rows.length; try { var border = getComputedStyle(table.rows[0].cells[0], '').getPropertyValue('border-top-width'); border = border.replace('px', '') * 1; } catch (e) { var border = table.rows[0].cells[0].currentStyle.borderWidth; border = (border.replace('px', '') * 1) / 2; } var height = 0; if (rowsInTable &gt; maxRows) { for (var i = 0; i &lt; maxRows; i++) { height += table.rows[i].clientHeight + border; } wrapper.style.height = height + "px"; } } </code></pre> <p>The try/catch in there handles the differences between IE and other browsers. The code in the catch is for IE.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload