Переполнение в таблице TD ширина относительной ширины

Question

Я борюсь с этой проблемой уже довольно давно и не могу найти правильное решение моей проблемы.

Что у меня есть:

<div style="width:150px; border:1px solid #000;overflow: auto;"> 
    <div>SOME TEXT</div> 
    <table style="width:100%; border:1px solid #0F0;"> 
     <tr> 
      <td>HEAD1</td> 
      <td>HEAD2</td> 
      <td>HEAD3</td> 
     </tr> 
     <tr> 
      <td colspan="3"> 
       <div style="overflow: auto; border:1px solid #F00;"> 
        <table> 
         <tr> 
          <td>HEAD</td> 
          <td>HEAD</td> 
          <td>HEAD</td> 
          <td>HEAD</td> 
          <td>HEAD</td> 
         </tr> 
         <tr> 
          <td>QQQQ</td> 
          <td>QQQQ</td> 
          <td>QQQQ</td> 
          <td>QQQQ</td> 
          <td>QQQQ</td> 
         </tr> 
        </table> 
       </div> 
      </td> 
     </tr> 
    </table> 
</div> 

http://jsfiddle.net/37ExS/

Объяснение:

Внешний ДИВ представляет мое содержание обертку с фиксированным с, который содержит некоторые другие дивы и таблицы с данными. Внутри таблицы данных находится строка, содержащая другую таблицу с подробными данными в отношении строки над ней.

Что я хочу:

В таблице ячейки, которая в настоящее время имеет Colspan из «3», содержащий таблицу детали должны иметь это перетекание содержание создания полосы прокрутки. Вот почему я завернул содержимое в другом div, но похоже, что ширина div определяется его содержимым, а не шириной его родителей (TD). устанавливая фиксированную ширину для внутренних работ div, но я хочу ее динамически, так как я действительно не знаю ширины оболочки содержимого.

Я надеюсь, что это было понятно.

UPDATE:

Это, как он должен себя вести: http://jsfiddle.net/eRA33/

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

Answer 1

Проблема в том, что вы не можете использовать свойство переполнения элемента таблицы. Хороший способ сделать это (на мой взгляд) - добавить tbody теги и установить их как display: block. Это позволяет им прокручивать. Это также позволяет избежать использования кучи разделителей обертки.

Не беспокойтесь об использовании табличного макета; это хорошо поддерживается.

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Вот небольшая скрипка, чтобы продемонстрировать. Я положил свои стили в разделе стиля, как это было легче для меня, чтобы работать таким образом :)

http://jsfiddle.net/eRA33/2/

HTML

<div class="wrapper"> 
<div>SOME TEXT</div> 

<table class="table-scroll table-data"> 
    <tbody> 
     <tr> 
      <td>HEAD1</td> 
      <td>HEAD2</td> 
      <td>HEAD3</td> 
      <td>HEAD4</td> 
     </tr> 
     <tr> 
      <td colspan="4"> 
       <table class="table-scroll table-detail"> 
        <tbody> 
         <tr> 
          <td>HEAD</td> 
          <td>HEAD</td> 
          <td>HEAD</td> 
          <td>HEAD</td> 
          <td>HEAD</td> 
          <td>HEAD</td> 
         </tr> 
         <tr> 
          <td>QQQQ</td> 
          <td>QQQQ</td> 
          <td>QQQQ</td> 
          <td>QQQQ</td> 
          <td>QQQQ</td> 
          <td>QQQQ</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</div> 

CSS

.wrapper { 
    width:180px; 
    border:1px solid #000; 
} 

.table-scroll { 
    width:100%; 
    table-layout: fixed; 
} 

.table-scroll tbody { 
    display:block; 
    overflow:scroll; 
} 

.table-data { 
    border:1px solid #0F0; 
} 
.table-detail { 
    border:1px solid #F00; 
}