blog ブログ

TOP ＞ blog ＞ [初心者向け][CSS]表の行や横列を固定しよう

2024.11.20

[初心者向け][CSS]表の行や横列を固定しよう

WEB#sochan

こんにちは、デザイナーのsochanです。
今回は表の行や列を固定させてスクロールする方法をご紹介します。

ポイント

① 親要素に『overflow:auto』を指定する。
② tableのサイズを親要素より大きくする。
行固定の場合 ⇒ 高さのサイズを親要素より大きくする
列固定の場合 ⇒ 幅のサイズを親要素より大きくする
③ th、tdにwhite-space:nowrapを指定する。
④ 固定させたい要素に「position:sticky」「top:0」「left:0」を指定する。

見出し縦列を固定する

見出し1	テキストです	テキストです	テキストです	テキストです	テキストです
見出し2	テキストです	テキストです	テキストです	テキストです	テキストです
見出し3	テキストです	テキストです	テキストです	テキストです	テキストです


      <div class="table-box">
         <table>
            <tr>
              <th class="fix">見出し1</th>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>
            </tr>
            <tr>
              <th class="fix">見出し2</th>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>
            </tr>
            <tr>
              <th class="fix">見出し3</th>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>
            </tr>
          </table>
       </div>


.table-box{
  max-width:300px;
  overflow-x: auto; /* 親要素に */
}

table{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; 
  text-align: center;
  width: 450px;/* 横幅を親要素より大きく */
}

th,td{
  white-space:nowrap
  vertical-align: middle;
  padding: 20px;
  border: 1px solid #6c2735;
  color: #6c2735;
}

th{
  background-color: #FAF2F4;
}

td{
  background-color: #fff;
}

.fix {
  position: sticky;/* 固定する */
  top: 0;  /* 上に固定 */
  left: 0; /* 左に固定 */
  background: none;
  border-left: none;
  border-right: none;
}
.fix::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background: #ccc;
  z-index: -1;
}

見出し横列を固定する

見出し1	見出し2	見出し3
テキストです	テキストです	テキストです
テキストです	テキストです	テキストです
テキストです	テキストです	テキストです
テキストです	テキストです	テキストです
テキストです	テキストです	テキストです


       <div class="table-box">
          <table>
            <tr>
              <th class="fix">見出し1</th>
              <th class="fix">見出し2</th>
              <th class="fix">見出し3</th>
            </tr>

            <tr>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>

            <tr>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>
            </tr>

            <tr>
              <td>テキストです</td>
              <td>テキストです</td>
              <td>テキストです</td>
            </tr>

         </table>
       </div>


.table_box{
overflow-y: auto;/* 親要素に */
height: 200px;
width:400px;
-webkit-overflow-scrolling: touch;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height:400px;/* 高さを親要素より大きく */
}
th, td {
  white-space:nowrap
vertical-align: middle;
padding: 20px;
border: 1px solid #000;
color: #000;
font-size: 14px;
text-align: center;
white-space: nowrap;
}
th {
background: #6c2735;
}
td {
background: #fff;
}
.sticky {
position: sticky;/* 固定させる */
top: 0;/* 固定させる */
left: 0;/* 固定させる */
border-top: none;
}
.sticky::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
background: #ccc;
z-index: -1;
}

日の出医療福祉グループクリエイティブ室では医療・介護・保育を始めとする医療福祉業界の様々な制作を行っています。
気になった方はお気軽にお問い合わせからご相談ください。

お問い合わせはこちら