Переполнение CSS: ????а таблицы или какой-то другой метод?

Question

У меня есть таблица шириной 640 пикселей, разделенная на два [TD].Левый - 150px, а правый - 490px.

Вопрос заключается в том, как с помощью CSS или любого другого метода предотвратить переполнение содержимого по сравнению с заданным размером и сделать страницу похожей на беспорядок.

Я пробовал метод css overflow: scroll, и в некоторых случаях это работает, но не во всех.Мне нужно что-то, что будет работать каждый раз.Если бы я мог заставить каждую ТД прокручиваться, если контента больше, этого было бы вполне достаточно.

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

Спасибо

Answer 1

Я до сих пор согласен с обоими ответами - идеальное решение состоит в том, чтобы перекодировать ваш макет без таблицы, но если у вас нет времени, заверните содержимое ячейки таблицы в <div>, и это поможет:

HTML

<table>
    <tr>
        <td class="left">
           <div>This is your left content</div>
        </td>
        <td class="right">
           <div>This is your right content</div>
        </td>
    </tr>
</table>

CSS

table {
    width: 640px;   
}

td div {
   overflow: scroll;  
}   

td.left,
td.left div {
    width: 150px;
}   

td.right,
td.right div {
    width: 490px;
} 

Добавленные <div> вокруг вашего контента будут уважатьСвойство переполнения CSS и предотвращение взрыва макета из неразрывного содержимого.

Answer 2

Если вы используете таблицы в качестве основы вашего сайта, то вы делаете это неправильно.Вместо этого вы должны использовать элементы div.Таблицы следует использовать для табличных данных, а не для структуры.

Иногда довольно быстро получить внешний вид, как при использовании таблицы, но это не невозможно.Для двухрядной таблицы вы можете использовать что-то вроде этого

    <div id="container">
      <div id="left">
      <div id="right">
      <div class="clr" >
    </div>

CSS:

#container{
  width: 640px;
}
#left{
  width: 150px;
  flot: left; /*if you want them to be next to each other */
  overflow: scroll; /*or hidden?*/
}
#right{
  width: 490px;
  float: left;
  overflow: scroll; 
}
.clr {
  clear: both;
}

Answer 3

Поскольку вы используете фиксированную ширину, похоже, вам нужно установить table-layout: fixed для вашего table элемента.