親要素がoverflowしているときに右側のpadding-rightの取り方

以下のような例で、内容物のwidthが相対的に長くなり、親要素がoverflow:scrollが効きだした際に、padding-rightが取れなくなっているように見えます。いくら内容物が長くても、下記の例で行けばpadding-leftもpadding-rightも常に10pxを確保したいのですがどのようにしたら良いのでしょうか？

JSFiddle

html
1</<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3<head>
4  <meta charset="utf-8">
5  <title></title>
6  <style media="screen">
7    table{
8      border:1px solid black;
9    }
10    .wrapper{
11      border:1px solid black;
12      padding:10px;
13      overflow:scroll;
14    }
15  </style>
16</head>
17<body>
18  <div class="wrapper">
19    <table>
20      <thead>
21        <tr><th>1</th><th>2</th></tr>
22      </thead>
23      <tbody>
24        <tr><td>1111111111111111111111111111111</td><td>222222222222222222222222222222</td></tr>
25      </tbody>
26    </table>
27    
28  </div>
29</body>
30</html>

行動規範の内容に同意します

回答1件

ベストアンサー

疑似要素を右側に詰め込むやり方があります。

css
1table{
2  position: relative;
3  border: 1px solid black;
4}
5table::before {
6  content: "";
7  display: block;
8  position: absolute;
9  left: 100%;
10  top: 0;
11  width: 10px;
12  height: 100%;
13}
14.wrapper{
15  border: 1px solid black;
16  padding: 0 0 0 10px;
17  overflow: scroll;
18}

あるいはdivの階層を1段増やしてinline-blockにするなどもあります。

html
1  <div class="wrapper">
2    <div class="inner">
3      <table>
4        <thead>
5          <tr><th>1</th><th>2</th></tr>
6        </thead>
7        <tbody>
8          <tr><td>1111111111111111111111111111111</td><td>222222222222222222222222222222</td></tr>
9        </tbody>
10      </table>
11    </div>
12  </div>

css
1.wrapper{
2  border:1px solid black;
3  padding: 0 0 0 10px;
4  overflow:scroll;
5}
6.inner {
7  display: inline-block;
8  padding: 0 10px 0 0;
9}

投稿2021/09/24 18:53

編集2021/09/29 13:49

surface_0

総合スコア497

pegy

2021/09/28 14:34

ご返信遅くなり申し訳ございませんでした。無事解決を致しました！！

pegy

2021/09/28 14:44

コメントありがとうございます。ご返信が遅くなりましたことを深くお詫び差し上げます。さて、疑似要素ではうまくいかなかったのですが、display:inline-blockをinner側で設定することで解決いたしました。paddingをどのようにとるのかはブロック要素の取り扱いと深くかかわりがあるのですね・・・調べてみようと思います。