表の形を変更したい | コミュニティ

タグ付き： widget, 表

コミュニティ

表の形を変更したい

トピックス by widget初心者 1792 pt 2023年12月20日 15:56 77 PV
【相談内容】

表の表示を変更したいです。

現状：https://gyazo.com/adbc9c47c45ff2f2733e5d632a4aa476

理想：https://gyazo.com/29bf6d02d29ae0d0ef8b1e5f0e6667b2

【相談ページ】

https://sb-draft-preview.squadbeyond.com/articles/mQOvqWgRIwhHDGdyogeqw/draft?token=860a3a1a9a55552d0eb11b97b8334cb7
widgetマスター 4 月, 1 週間前 2 人 · 1 コメント
- widget
- 表
1 コメント

widgetマスター

モデレータ

2023年12月20日 16:00

テーブルを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%; など適宜修正してください（書いてあるところ全て）