インラインフレームの中身の要素を右寄せにしたい

Question

幅600pxインラインフレーム(index.html)の中に幅1800pxのテーブルが記載されたhtml(test.html)を表示します。
そのままですと、左寄せとして表示されます。
下記の例では、index.htmlのインラインフレームの内部要素としてtest.htmlが表示されますが、インラインフレームの幅が600に対し、内部要素のtest.htmlの中に記載されているテーブルの幅が1800あるため、テーブルの一部しか表示されません。下記の例では左寄せとなり「列1」が標準状態で見えます。「列3」を見るためには右にスクロールする形となります。

index.html

<iframe src="test.html" name="ifr" width="600" height="300" ></iframe>

test.html

<table class="table1" width="1800">
  <tr><th>列1</th><th>列2</th><th>列3</th></tr>
  <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
  <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
  <tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>

やりたいこと。

インラインフレームの中身を「右寄せ」で表示したいです。
上記の例でいうと、「列3」が標準で表示され、左スクロールすることにより「列2」「列1」が見えるというようにしたいというのが希望です。

どのようにすればいいかご教示いただきたくお願いいたします。

Answer 1

jqueryでいける気がします。

$("body, html").scrollLeft($(".table1").outerWidth())

Comments

[tajix_japan]

有難うございます。

test.html に下記を加えてみたのですが、残念ながら左寄せのままでした。

お考えいただき大変ありがとうございました。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
$("body, html").scrollLeft($(".table1").outerWidth())
</script>