html scrollable tab bar - make a td continue on the next row when it overflows the screen

Question

What I'm trying to achieve is a scrollable tab-bar.

I have a web page with multiple tabs.

The "tab" control it's just an html table, with a single row, in which each tab is a td.

The page has way over 10 tabs, an the tabs no longer fit in the screen.

I'd like to have the tabs scroll, or at least continue on the following row (something like a word-wrap effect)

or any other means so as to have as many tabs as I need, without worrying about the screen size...

thanks a lot

saludos

sas

ps: maybe I should be using a table, but rather just a paragraph, with each tab side by side...

Answer 1

I think a better option to achieve what you want is to put each tab in a div tag (or other tag). Then float:left each div. They will automatically wrap when the browser window is too narrow.

Something like this:

<div id='mytabs'>
  <div class='tab'>Tab 1</div>
  <div class='tab'>Tab 2</div>
  <div class='tab'>Tab 3</div>
  <div class='tab'>Tab 4</div>
  .. etc
  <div style='clear:both'></div>
</div>

Then in your stylesheet:

#mytabs .tab
{
  float:left;
  width:100px; // assuming fixed width tabs
  // other formatting
}

Answer 2

I've just found this

<div style="overflow:auto; width:100%">
<table border="1" >
  <tr>
    <td>10000000000000000000000000000000000</td>
    <td>10000000000000000000000000000000000</td>
    <td>10000000000000000000000000000000000</td>
    <td>10000000000000000000000000000000000</td>
    <td>10000000000000000000000000000000000</td>
  </tr>
</table>
</div>

it seems like it could work...