Q&A
cssは一切書いてませんか？
以下のようなフェスのタイムテーブルをtableタグで実装しようとしています。
文字の横にborderを持ってきたいのですが、調べたところ実装方法がわかりません。
以下の写真のようになってしまっています。
erb
1<tbody> 2 <tr> 3 <th></th> 4 <td>ステージ1</td> 5 <td>ステージ2</td> 6 </tr> 7 <tr> 8 <th>10:00</th> 9 <td rowspan='2'>Sex Pistols</td> 10 <td></td> 11 </tr> 12 <tr> 13 <th>10:30</th> 14 <td></td> 15 <%# <td></td> %> 16 </tr> 17 <tr> 18 <th>11:00</th> 19 <td></td> 20 <td>The Clash</td> 21 </tr> 22 <tr> 23 <th>11:30</th> 24 <td></td> 25 <td></td> 26 </tr> 27 <tr> 28 <th>12:00</th> 29 <td>Mortorhead</td> 30 <td></td> 31 </tr> 32 <tr> 33 <th>12:30</th> 34 <td></td> 35 <td></td> 36 </tr> 37 <tr> 38 <th>13:00</th> 39 <td></td> 40 <td></td> 41 </tr> 42 <tr> 43 <th>13:30</th> 44 <td></td> 45 <td></td> 46 </tr> 47 <tr> 48 <th>14:00</th> 49 <td></td> 50 <td></td> 51 </tr> 52 <tr> 53 <th>14:30</th> 54 <td></td> 55 <td></td> 56 </tr> 57 <tr> 58 <th>15:00</th> 59 <td></td> 60 <td></td> 61 </tr> 62 <tr> 63 <th>15:30</th> 64 <td></td> 65 <td></td> 66 </tr> 67 <tr> 68 <th>16:00</th> 69 <td></td> 70 <td></td> 71 </tr> 72 </tbody> 73 </tbale>
よくあるフェスのようなタイムテーブルのデザインはどのように実装したらよろしいでしょうか？
回答1件
0
ベストアンサー
以下のようにしてはいかがでしょうか。
css
1th { 2 position: relative; 3 top: -0.75em; /* 値は加減する必要があると思います */ 4}
投稿2021/07/01 04:31
総合スコア36960
返信ありがとうございます。
数字の横に線がくるようにできたのですが、文字と被ってしまい以下の画像のようになってしまいます。
https://i.gyazo.com/4e7a31444609043f289d82ae42f5052f.png
被っているとことを消したりはできませんでしょうか。
その線は、いったい何でしょう？
とりあえず、背景色でもつければいいのではないかな、と思いました。
letfの値を入れることで位置を調整することができました。
あなたの回答
tips
プレビュー
