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

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 con开发者_运维知识库tinue 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...

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
}

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...