html прокручиваемая панель вкладок - заставляет тд продолжать в следующей строке, когда он выходит за пределы экрана - PullRequest
Новая
       42

html прокручиваемая панель вкладок - заставляет тд продолжать в следующей строке, когда он выходит за пределы экрана

1 голос
/ 14 марта 2010

Я пытаюсь достичь прокручиваемой вкладки.

У меня есть веб-страница с несколькими вкладками.

Элемент управления «tab» - это просто HTML-таблица с одной строкой, в которой каждая вкладка является тд.

На странице более 10 вкладок, и вкладки больше не помещаются на экране.

Я бы хотел прокрутить вкладки или, по крайней мере, продолжить в следующей строке (что-то вроде эффекта переноса слов)

или любым другим способом, чтобы иметь столько вкладок, сколько мне нужно, не беспокоясь о размере экрана ...

большое спасибо

Saludos

1017 * SAS *

ps: возможно, мне следует использовать таблицу, а не просто абзац, с каждой вкладкой рядом ...

Ответы [ 2 ]

2 голосов
/ 14 марта 2010

Я думаю, что лучший вариант для достижения того, что вы хотите - это поместить каждую вкладку в тег div (или другой тег). Тогда float:left каждый div. Они автоматически переносятся, когда окно браузера становится слишком узким.

Примерно так: 

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

Тогда в вашей таблице стилей: 

#mytabs .tab
{
  float:left;
  width:100px; // assuming fixed width tabs
  // other formatting
}
0 голосов
/ 14 марта 2010

Я только что нашел это 

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

похоже, что это может сработать ...

...