CSS

【HTML + CSS】テーブル作成(初期スタイルリセット)

テーブルの基本コードをよく忘れるので残します。

See the Pen
yLaYmrv
by keikoro (@momoi)
on CodePen.

<table>
      <tr>
          <th></th>
          <th>head</th>
          <th>head</th>
          <th>head</th>
      </tr>
      <tr>
          <th>head</th>
          <td>col</td>
          <td>col</td>
          <td>col</td>
      </tr>
      <tr>
          <th>head</th>
          <td>col</td>
          <td>col</td>
          <td>col</td>
      </tr>
  </table>
table{
  border-collapse: collapse;
  border-spacing: 0;
  /* 列幅を均等にしたい場合は指定する */
  table-layout: fixed;
  width: 600px;
}
table,
th,
td {
  background: #fff;
  border: 1px solid #707070;
  vertical-align: middle;
  padding: 10px;
}
th:first-child {
   width: 100px;
}

大事な部分はこのあたり。

隣接セルのボーダーを重ねて表示
border-collapse: collapse;

列幅を均等にする
table-layout: fixed;
width: 600px;

-CSS
-, ,

© 2022 KeiTips Powered by AFFINGER5