Q&A
前提・実現したいこと
既存の表内のth、tdの文字をtransformのscaleを使い、平体(0.5)で変形させたいと思います。
tableサイズや、見た目はそのままでth、tdの文字だけを平体に見せたいです。thやtdで折り返し文字があったときも同様です。
transform-origin:right top;も合わせて使っています。
問題点
transformでscaleによる文字変形を行うとth、tdの要素が縮小されるので、見た目が全体的に上へ上がっています。transformを利用時の幅調整についても色々確認しましたが、td、thに対しては有効な情報が得られませんでした。
現状css対処することで解決方法を探していますが、他の方法も組み合わせて解決できるならその方法でもと考えています。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <link rel="stylesheet" href="style_hyou.css" /> 5</head> 6<body> 7<h2><a id="midashi80">温泉地</a></h2> 8 <table class="onsen"> 9 <thead> 10 <tr> 11 <th class="tcy">NO<div></th> 12 <th>地域<div></th> 13 <th>日帰り及び宿泊可能な温泉地・温泉郷<div></th> 14 <th>アクセス方法<div></th> 15 </tr> 16 </thead> 17 <tbody> 18 <tr> 19 <td class="tcy">1</td> 20 <td rowspan="3">あああ</td> 21 <td>あああ・あああ</td> 22 <td>あああああああ</td> 23 </tr> 24 <tr> 25 <td class="tcy">2</td> 26 <td>あいうえおあいうえお</td> 27 <td>ああいい</td> 28 </tr> 29 <tr> 30 <td class="tcy">3</td> 31 <td>あいうえおあいうえお</td> 32 <td>あああい</td> 33 </tr> 34 <tr> 35 <td class="tcy">4</td> 36 <td rowspan="2">いいいいいいいいいいいい</td> 37 <td>えええ</td> 38 <td>かきかかきき</td> 39 </tr> 40 <tr> 41 <td class="tcy">5</td> 42 <td>えええ</td> 43 <td>かかききかきき</td> 44 </tr> 45 <tr> 46 <td class="tcy">6</td> 47 <td rowspan="2">えええ</td> 48 <td>えええ</td> 49 <td>ううううええ</td> 50 </tr> 51 <tr> 52 <td class="tcy">7</td> 53 <td>○○○○○○○○○○○○○○○温泉郷</td> 54 <td>ええええおさささええええおさささ</td> 55 </tr> 56 <tr> 57 <td class="tcy">8</td> 58 <td>えええ</td> 59 <td>□□□□温泉</td> 60 <td>ししししし</td> 61 </tr> 62 </tbody> 63 </table> 64</body> 65</html>
css
1@charset "UTF-8"; 2html { 3 /* 組み方向 */ 4 -epub-writing-mode: vertical-rl; 5 -ms-writing-mode: tb-rl; 6 writing-mode: vertical-rl; 7 8 orphans: 1; 9 widows: 1; 10} 11 12* { 13 margin: 0; 14 padding: 0; 15} 16 17/* 印刷用のみ段組にする */ 18@media print { 19 html { 20 -webkit-column-count: 1; 21 -moz-column-count: 1; 22 column-count: 1; 23 -webkit-column-gap: 2em; 24 -moz-column-gap: 2em; 25 column-gap: 2em; 26 } 27} 28 29@page { 30 size: 205mm 277mm; 31 margin-top: 17mm; 32 margin-bottom: 15mm; 33 margin-left: 15mm; 34 margin-right: 15mm; 35 /* 以下、マージンボックスに継承される */ 36 font-size: 8pt; 37 vertical-align: top; 38} 39 40html { 41 /* フォント */ 42 font-family: "Helvetica Neue", Roboto, Verdana, "游ゴシック", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 43 font-weight: normal; 44 font-size: 10pt; 45 line-height: 18pt; 46 /* 行末揃え */ 47 text-align: justify; 48} 49 50h1 { 51 /* フォント */ 52 font-weight: bold; 53 /* フォントサイズ */ 54 font-size: 20pt; 55 /* 行送り */ 56 line-height: 48pt; 57 /* 字下げ */ 58 text-indent: 0; 59 /* 直後の改ページ・改段禁止 */ 60 -webkit-column-break-after: avoid; 61 page-break-after: avoid; 62 break-after: avoid; 63} 64 65h2 { 66 /* フォントサイズ */ 67 font-size: 12pt; 68 /* 字下げ */ 69 text-indent: 0; 70 /* 直後の改ページ・改段禁止 */ 71 -webkit-column-break-after: avoid; 72 page-break-after: avoid; 73 break-after: avoid; 74 line-height: 32.25pt; 75 border-right: 3.75pt solid #666; 76 margin-right: 18pt; 77} 78 79.tcy { 80 /* 縦中横 */ 81 -webkit-text-combine: horizontal; 82 text-combine: horizontal; 83 -ms-text-combine-horizontal: all; 84 text-combine-horizontal: all; 85 text-combine-upright: all; 86} 87 88table.onsen { 89 width: 100%; 90 height: 640px; 91 border-collapse: collapse; 92 border-spacing: 0; 93} 94 95.onsen th { 96 padding: 8px 2px 8px; 97 border: solid 1px; 98 text-align: center; 99 transform-origin:right top; 100 transform: scale(1,0.5); 101} 102.onsen td { 103 padding: 8px 2px 8px; 104 border: solid 1px; 105 transform-origin:right top; 106 transform: scale(1,0.5); 107} 108
回答1件
0
ベストアンサー
html
1 <th> 2 <div>日帰り及び宿泊可能な温泉地・温泉郷</div> 3 <div> 4 </th>
css
1 .onsen th div { 2 transform-origin: right top; 3 transform: scale(1, 0.5); 4 }
のようにラップして、ラップした要素を変形してはどうでしょうか。
投稿2022/04/27 02:28
総合スコア37535
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/04/27 03:03
2022/04/27 03:06
2022/04/27 05:33