tdの中のテーブルをスクロールしたい

Question

tdの中にあるテーブルに横スクロール機能をつけたいのですが上手くいきません。
(下記コードではスクロールせずに単にテーブルが1400pxになってしまいました)

(前略)
<table width="1000px">
 <tr>
 </tr>
 <tr>
  <td width="1000px">
   <div style="widrh:1400px;overflow-x:scroll">
     <table id="scrollshitai" width="100%">
      中略
     </table>
   </div>
  </td>
 </tr>
</table>

Comments

[yambejp]

レガシーなテーブルデザインがマストでなければ
いまどき書くような書式ではないですが・・・

[summerboot]

既存データとの統一やコーディング規約等の兼ね合いがあるので、書式そのものについてのツッコミはご遠慮頂けると幸いです。

[yambejp]

そうですか、ではお役にたてそうにありません、あしからず

Answer 1

こちらでいかがでしょうか？
元コードの<td width="1000px">のほうにstyle="overflow-x:scroll;display:block;"つけてくださっても大丈夫です。

<table width="1000px" style="overflow-x:scroll;display:block;">
 <tr>
 </tr>
 <tr>
  <td>
   <div style="width:1400px;">
     <table id="scrollshitai" width="100%">
       中略
     </table>
   </div>
  </td>
 </tr>
</table>

Comments

[summerboot]

ありがとうございました、お陰様で欲しい結果が得られました。

他のお二方もありがとうございました。

Answer 2

HTMLでスクロールバー付きのボックスを設定する方法の記事が参考になるかと思います。

スクロールする領域は、幅(width)と高さ(height)を指定する必要があります。

スクロールが縦方向だけで良ければ、overflow: auto;
縦方向と横方向のスクロールをするなら、overflow: scroll;

Answer 3

こういうことですか？

リンク内容

<table>
  <tbody>
   <tr>
     <td>
       あ
     </td>
   </tr>
   <tr>
    <td>
      い
     </td>
   </tr>
  </tbody>
</table>

table, td {
  border:1px solid black;
}

table {
  width:1000px;
  display:block;
  overflow-x:scroll;
}

tbody {
  width:1400px;
  display:table;
}

Comments

[azuapricot]

普通のテーブルじゃなくてtdの中にさらにテーブルがあるってことですか（？？？）