title: How to add horizontal scroll bar to specific columns of HTML table without using table into table in following scenario?
body: <p>I've a HTML table. I want to keep the first 10 columns of the table fixed and add the horizontal scroll bar to the rest of columns from table. For achieving this I tried many ways. But ultimately I had to use table inside a table, which I want to avoid. Can anyone help me in this regard without using table inside a table. For your reference I'm giving here the link of jsFiddle. If you need any further information I can provide you the same. Thanks in advance. Waiting for your replies. The jsFiddle link is as follows:</p>
  
  <p><a href="http://jsfiddle.net/zgNMT/1/" rel="nofollow">http://jsfiddle.net/zgNMT/1/</a>  </p>
  
  <p>The HTML code is as follows:</p>
  
  <pre><code>&lt;table id="outerTable"&gt;
      &lt;tr&gt;
          &lt;td style="vertical-align:top;"&gt;&lt;div&gt;
              &lt;table class="fixed"&gt;
                  &lt;tr&gt;
                      &lt;td class="cell"&gt;One&lt;/td&gt;
                      &lt;td class="cell"&gt;Two&lt;/td&gt;
                      &lt;td class="cell"&gt;Three&lt;/td&gt;
                      &lt;td class="cell"&gt;Four&lt;/td&gt;
                      &lt;td class="cell"&gt;Five&lt;/td&gt;
                      &lt;td class="cell"&gt;Six&lt;/td&gt;
                      &lt;td class="cell"&gt;Seven&lt;/td&gt;
                      &lt;td class="cell"&gt;Eight&lt;/td&gt;
                      &lt;td class="cell"&gt;Nine&lt;/td&gt;
                      &lt;td class="cell"&gt;Ten&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="cell"&gt;One&lt;/td&gt;
                      &lt;td class="cell"&gt;Two&lt;/td&gt;
                      &lt;td class="cell"&gt;Three&lt;/td&gt;
                      &lt;td class="cell"&gt;Four&lt;/td&gt;
                      &lt;td class="cell"&gt;Five&lt;/td&gt;
                      &lt;td class="cell"&gt;Six&lt;/td&gt;
                      &lt;td class="cell"&gt;Seven&lt;/td&gt;
                      &lt;td class="cell"&gt;Eight&lt;/td&gt;
                      &lt;td class="cell"&gt;Nine&lt;/td&gt;
                      &lt;td class="cell"&gt;Ten&lt;/td&gt;
  
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;&lt;/td&gt;
          &lt;td style="vertical-align:top;"&gt;&lt;div style="width:230px; overflow-x:scroll;"&gt;
              &lt;table class="scrolling"&gt;
                  &lt;tr&gt;
                      &lt;td class="cell"&gt;One&lt;/td&gt;
                      &lt;td class="cell"&gt;Two&lt;/td&gt;
                      &lt;td class="cell"&gt;Three&lt;/td&gt;
                      &lt;td class="cell"&gt;Four&lt;/td&gt;
                      &lt;td class="cell"&gt;Five&lt;/td&gt;
                      &lt;td class="cell"&gt;Six&lt;/td&gt;
                      &lt;td class="cell"&gt;Seven&lt;/td&gt;
                      &lt;td class="cell"&gt;Eight&lt;/td&gt;
                      &lt;td class="cell"&gt;Nine&lt;/td&gt;
                      &lt;td class="cell"&gt;Ten&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="cell"&gt;One&lt;/td&gt;
                      &lt;td class="cell"&gt;Two&lt;/td&gt;
                      &lt;td class="cell"&gt;Three&lt;/td&gt;
                      &lt;td class="cell"&gt;Four&lt;/td&gt;
                      &lt;td class="cell"&gt;Five&lt;/td&gt;
                      &lt;td class="cell"&gt;Six&lt;/td&gt;
                      &lt;td class="cell"&gt;Seven&lt;/td&gt;
                      &lt;td class="cell"&gt;Eight&lt;/td&gt;
                      &lt;td class="cell"&gt;Nine&lt;/td&gt;
                      &lt;td class="cell"&gt;Ten&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>