Как сделать div как 100% родительского, а не дочернего элемента

Question

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

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

Когда я пытаюсь выполнить следующее, div устанавливает ширину в 100% от тега span, содержащегося в элементе, а не в ячейку

<table cellpadding="3" width="90%" align="center" border="0">
  <tr>
    <td>
       <div style="border: solid 1px red; height: 10px; width: 100%; overflow: auto;">
          <span style="width: 2000px;">a</span>
       </div>
    </td>
  </tr>
</table>

Я был под впечатлением, что width = 100% должен быть размером для родителя, а не для ребенка?

Есть идеи?

Answer 1

Пустая ячейка таблицы не имеет ширины, интервал - это тот, который увеличивает ширину ячейки. Вот почему ширина div равна ширине ячейки.

Answer 2

Я пробовал его внутри содержащего элемента вместо таблицы, и он отлично работает.

Я предполагаю, что ширина внутреннего пролета вызывает ширину td, равную 2000px