@nakajima4635 (なかじまです)posted at 2024-12-06

このような表をHTML、CSSで作りたいです。

Q&A

HTML CSS

下のような表をWeb上で表示させるべく、HTMLとCSSを駆使して作成しております。

ある程度は作れているのですが、セルの一部分だけを小さくする方法がわかりません。
（振込先、お支払い条件のところの行です）

td width=””を試しましたが駄目でした。

ご教授よろしくおねがいします。

2Answer

@southkey47 posted at 2024-12-06

colspanのみでは想定通りの形にならないので<colgroup>を使ってwidthを設定してあげましょう

html

<table>
  <colgroup>
    <col style="width:12.5%;">
    <col style="width:12.5%;">
    <col style="width:12.5%;">
    <col style="width:12.5%;">
    <col style="width:12.5%;">
    <col style="width:12.5%;">
    <col style="width:12.5%;">
    <col style="width:12.5%;">
  </colgroup>
  <thead>
    <tr>
      <th colspan="3">3</th>
      <th>1</th>
      <th>1</th>
      <th colspan="2">2</th>
      <th>1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3">3</td>
      <td>1</td>
      <td>1</td>
      <td colspan="2">2</td>
      <td>1</td>
    </tr>
    <tr>
      <td colspan="3">3</td>
      <td>1</td>
      <td>1</td>
      <td colspan="2">2</td>
      <td>1</td>
    </tr>
    <tr>
      <td colspan="3">3</td>
      <td>1</td>
      <td>1</td>
      <td colspan="2">2</td>
      <td>1</td>
    </tr>
    <tr>
      <td rowspan="2">1</td>
      <td colspan="7">7</td>
    </tr>
    <tr>
      <td colspan="7">7</td>
    </tr>
    <tr>
      <td>1</td>
      <td colspan="7">7</td>
    </tr>
    <tr>
      <td colspan="8">8</td>
    </tr>
  </tbody>
</table>

See the Pen Untitled by southkey47 (@southkey47) on CodePen.

2Like

Comments

@nakajima4635
Questioner
そういう方法もあったのですね！学びになります！ありがとうございます。
@southkey47
tableタグのジェネレーター等で列数8設定で作っても実際には5列（3+1+1+2+1）なので（1+1+1+1+1+1+1+1）の行がないと出力も5列になるんですよね

colspanもその5列を基準に判断してしまうので数が合わず想定通りの幅になってくれませんし、（1+1+1+1+1+1+1+1）を作ってcssでそこだけ隠すという手も無くはないですがセマンティックではないです

そこで非表示で基準値を設定できる<colgroup>の出番というわけでした

例では等分して全て12.5%ですが個々に設定できますし、インラインではなくcss側で制御してあげればレスポンシブも対応できます
@nakajima4635
Questioner
まだ60%くらいしか理解できませんでしたが、なんとなくわかりました！
まだまだ勉強していきたいと思います。ご教授いただきありがとうございます！

@lhankor_mhy posted at 2024-12-06

コードがないので想像ですが、colspanの値がおかしいとかそういうことではないですか？

colspan

この属性はセルをいくつの列に広げるかを示す、負でない整数を持ちます。
<td>: 表データセル要素 - HTML: ハイパーテキストマークアップ言語 | MDN

0Like

Comments

@nakajima4635

Questioner

コードはこんな感じです

<table class="detail">
                <thead>
                    <tr>
                        <th class="item">品名 及び 内容</th>
                        <th class="unit_price">単価</th>
                        <th class="amount">数量</th>
                        <th class="subtotal">金額</th>
                        <th class="remarks">備考</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="dataline">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td class="text-left">　<?php echo htmlspecialchars($member->content); ?></td>
                        <td> <?php echo htmlspecialchars($member->qty); ?> </td>
                        <td> <?php echo htmlspecialchars($member->cost); ?> </td>
                        <td> <?php echo htmlspecialchars($member->price); ?> </td>
                        <td> <?php echo htmlspecialchars($member->remarks); ?> </td>
                    </tr>
                    <tr class="dataline">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td class="text-left"> 　以下空白 </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td class="text-left">　小計 </td>
                        <td> </td>
                        <td> </td>
                        <td> <?php echo htmlspecialchars($member->sub_total); ?> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td class="text-left">　消費税(10%) </td>
                        <td> </td>
                        <td> </td>
                        <td> <?php echo htmlspecialchars($member->tax); ?> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td class="text-left">　合計 </td>
                        <td> </td>
                        <td> </td>
                        <td> <?php echo htmlspecialchars($member->total); ?> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr class="dataline">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td class="space" rowspan="2" > 振込先 </td>
                        <td class="text-left" colspan="4" >--銀行 --支店</td>
                    </tr>
                    <tr>
                        <!--<td></td>-->
                        <td class="text-left" colspan="4"> 普通口座 ----株式会社 口座番号 00000000</td>
                    <tr>
                        <td class="text-center">お支払い条件</td>
                        <td class="text-left" colspan="4">従来通り</td>
                    </tr>
                    <tr class="dataline">
                    </tr>
                </tbody>
            </table>

/* テーブル共通 */
  table,
  th,
  td {
    border: 1px #000000 solid;
    border-collapse: collapse;
    padding: 1px 5px;
  }
  
  table th {
    background: #ffffff;
    font-weight: normal;
    color: #000000;

  }
  table td {
    text-align: right;
  }
  
  /* テーブル 明細欄 */
  table.detail {
    width: 100%;
  }
  table.detail tr {
    height: 6mm;
  }
  table.detail th.item {
    width: 40%;
  }
  table.detail th.unit_price {
    width: 8%;
  }
  table.detail th.amount {
    width: 10%;
  }
  table.detail th.subtotal {
    width: 25%;
  }
  table.detail th.remarks {
    width: 17%;
  }
  
  table.detail td.space {
    width:15%;
  }
  table.detail td.space2 {
    width:85%;
  }

@lhankor_mhy
ご提示のスクリーンショットでは列数が8ですが、HTMLでは5個であるのは、どういう意図によるものですか？
もし意図がないのであれば、ひとまず、モデルになる表を忠実に再現して、それから細部にかかった方がいいのではないかな、と感じました。
@nakajima4635
Questioner
なるほど！言われて気が付き、やり方もなんとなく思い浮かびました！
一回Excelでしっかりと作ってみるべきですね！
ありがとうございます。

Are you sure you want to delete the question?

このような表をHTML、CSSで作りたいです。

2Answer

Comments

Comments

Your answer might help someone💌