Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Put the divs you want to scroll in a table like so:</p> <pre><code>&lt;div style='width:1000;border:2 solid red;overflow-x:auto'&gt; &lt;table&gt;&lt;tr&gt; &lt;td&gt;&lt;div style='width:300;height:200;border:1 solid black'&gt;Cell 1&amp;nbsp;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div style='width:300;height:200;border:1 solid black'&gt;Cell 2&amp;nbsp;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div style='width:300;height:200;border:1 solid black'&gt;Cell 3&amp;nbsp;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div style='width:300;height:200;border:1 solid black'&gt;Cell 4&amp;nbsp;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div style='width:300;height:200;border:1 solid black'&gt;Cell 5&amp;nbsp;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt;&lt;/table&gt; &lt;/div&gt; </code></pre> <p>Edit: I tried 3 of these suggested solutions - they all work fine in Google Chrome - but the first one (container1) doesn't work in IE (go figure) - so the SPAN solution gets my vote :-) :</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;style&gt; div#container1 { height: 275px; width: 100%; overflow: auto; white-space: nowrap; border:2 solid red; } div#container1 div.block { width: 300px; height: 200px; display: inline-block; border: 1 solid black; } div#container2 { height: 275px; width: 100%; overflow: auto; white-space: nowrap; border:2 solid red; } div#container2 span.block { width: 300px; height: 200px; display: inline-block; border: 1 solid black; } div#container3 { height: 275px; width: 100%; overflow: auto; white-space: nowrap; border:2 solid red; } div#container3 div.block { width: 300px; height: 200px; display: inline-block; border: 1 solid black; } &lt;/style&gt; &lt;p&gt; &lt;div id='container1'&gt; &lt;div class='block'&gt;Cell 1&amp;nbsp;&lt;/div&gt; &lt;div class='block'&gt;Cell 2&amp;nbsp;&lt;/div&gt; &lt;div class='block'&gt;Cell 3&amp;nbsp;&lt;/div&gt; &lt;div class='block'&gt;Cell 4&amp;nbsp;&lt;/div&gt; &lt;div class='block'&gt;Cell 5&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;p&gt; &lt;div id='container2'&gt; &lt;span class='block'&gt;Cell 1&amp;nbsp;&lt;/span&gt; &lt;span class='block'&gt;Cell 2&amp;nbsp;&lt;/span&gt; &lt;span class='block'&gt;Cell 3&amp;nbsp;&lt;/span&gt; &lt;span class='block'&gt;Cell 4&amp;nbsp;&lt;/span&gt; &lt;span class='block'&gt;Cell 5&amp;nbsp;&lt;/span&gt; &lt;/div&gt; &lt;p&gt; &lt;div id='container3'&gt; &lt;table&gt;&lt;tr&gt; &lt;td&gt;&lt;div class='block'&gt;Cell 1&amp;nbsp;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class='block'&gt;Cell 2&amp;nbsp;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class='block'&gt;Cell 3&amp;nbsp;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class='block'&gt;Cell 4&amp;nbsp;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class='block'&gt;Cell 5&amp;nbsp;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt;&lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Edit 2:</p> <p>I ran this test page through browsershots.org, to see how different browsers handle it. Conclusion: Browser compatibility sucks. :-)</p> <p><a href="http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm" rel="nofollow noreferrer">http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm</a></p> <p>The table solution worked more often - but the span option (which is cleaner) only broke on browsers I've never heard of. :-)</p>
    singulars
    1. This table or related slice is empty.
    1. POHow to get Floating DIVs inside fixed-width DIV to continue horizontally?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USTim Cooper
    1. USRon Savage
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTDownMod
    1. CO@Matthew James Taylor: That's just stupid, you don't know if a table solution is or isn't appropriate because the contents of the divs / cells are not known to us.
      singulars
      1. PO
      1. USjeroen
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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