Как сделать 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>

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

Есть идеи?

Answer 1

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

Answer 2

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

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