WEB広告運用の困りごとが集まる場所 › コミュニティ › コミュニティ › 表の形を変更したい
-
表の形を変更したい
トピックス by widget初心者 1792 pt 2023年12月20日 15:56 185 PV【相談内容】
表の表示を変更したいです。
現状:https://gyazo.com/adbc9c47c45ff2f2733e5d632a4aa476
理想:https://gyazo.com/29bf6d02d29ae0d0ef8b1e5f0e6667b2
【相談ページ】
widgetマスター 10 月, 3 数週間前 2 人 · 1 コメント -
1 コメント
-
テーブルを4列から2列にしたいとのことで、以下の様に修正してみてください。
(3箇所)
●html
<table>
<tbody>
<tr>
<th></th>
<td></td>
<th></th>
<td></td>
<tr>
<tr>
~
</tr>
</tbody>
</table>
↓↓↓
<table>
<tbody>
<tr>
<th></th>
<td></td>
<tr>
<tr>
<th></th>
<td></td>
<tr>
<tr>
~
</tr>
</tbody>
</table>trの中にあったth*2, td*2を1個ずつにすることで2列になります。
実際のページだとこうなります。
【変更前】
<tr style="margin: 0px; padding: 0px; border: 0px; letter-spacing: 0px; font: inherit; vertical-align: baseline;"> <th style="margin: 0px; padding: 10px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; text-align: left; background: rgb(254, 255, 236); width: 100px; color: rgb(87, 52, 39);"><span style="font-size: 15px;" class="sb-fs-free">初回価格</span></th> <td style="margin: 0px; padding: 0px; border-width: 0px 1px 1px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(87, 52, 39); border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; position: relative;"><span style="font-size: 15px;" class="sb-fs-free">¥2,900(税込)</span></td> <th style="margin: 0px; padding: 10px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; text-align: left; background: rgb(254, 255, 236); width: 100px; color: rgb(87, 52, 39);"><span style="font-size: 15px;" class="sb-fs-free">定期価格</span></th> <td style="margin: 0px; padding: 0px; border-width: 0px 1px 1px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(87, 52, 39); border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; position: relative;"><span style="font-size: 15px;" class="sb-fs-free">¥2,900(税込)</span></td> </tr>
【変更後】
<tr style="margin: 0px; padding: 0px; border: 0px; letter-spacing: 0px; font: inherit; vertical-align: baseline;"> <th style="margin: 0px; padding: 10px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; text-align: left; background: rgb(254, 255, 236); width: 100px; color: rgb(87, 52, 39);"><span style="font-size: 15px;" class="sb-fs-free">初回価格</span></th> <td style="margin: 0px; padding: 0px; border-width: 0px 1px 1px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(87, 52, 39); border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; position: relative;"><span style="font-size: 15px;" class="sb-fs-free">¥2,900(税込)</span></td></tr><tr> <th style="margin: 0px; padding: 10px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; text-align: left; background: rgb(254, 255, 236); width: 100px; color: rgb(87, 52, 39);"><span style="font-size: 15px;" class="sb-fs-free">定期価格</span></th> <td style="margin: 0px; padding: 0px; border-width: 0px 1px 1px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(87, 52, 39); border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; position: relative;"><span style="font-size: 15px;" class="sb-fs-free">¥2,900(税込)</span></td> </tr>
【修正箇所】
https://t.gyazo.com/teams/squadbeyond/18b4e022f85567d4604f161925b715cf.png
横幅に関しては下記修正を行ってください。
width: width:100%;
↓↓↓
width: 100%;またth部分の横幅ですが、htmlに直書きでwidth:100px; とありますのでwidth:50%; など適宜修正してください(書いてあるところ全て)