月別アーカイブ: 2月 2022

2022.2.8
js

テーブルセルをhoverして色を付ける時のテクニック

テーブルセルをhoverして色を付ける時のテクニックとして、

td:hover {
  background-color: #ff0000;
}

とかあると思うのですが、rowspanとかで結合してるときに使える時があるのがこれです。
使えない時もあるかもしれませんが、こういう風にやりたいときに有効です。

<table>
  <tbody>
    <tr>
      <td rowspan="3">Alphabet</td>
      <td rowspan="2">a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>f</td>
      <td>g</td>
      <td>h</td>
    </tr>
    <tr>
      <td rowspan="3">Number</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>
$("td").hover(function() { $el = $(this); $el.parent().addClass("hover");if ($el.parent().has('td[rowspan]').length == 0) $el .parent() .prevAll('tr:has(td[rowspan]):first') .find('td[rowspan]') .addClass("hover"); }, function() { $el .parent() .removeClass("hover") .prevAll('tr:has(td[rowspan]):first') .find('td[rowspan]') .removeClass("hover"); });
.hover { background: red; }
2022.2.8
js

テーブル横スクロール時にスクロール出来るよということを表示するjs

めちゃ便利です。※保存用
scroll-hint-master

2022.2.8
html&css, 未分類

テーブルの横スクロール（こっちの方が楽では？

前にこんな記事（テーブルを横スクロールさせるよ ）書きましたが、こっちの方がすごく分かりやすいし楽では？？？？？な気がします。レイアウト複雑じゃないサイトとかには有用な感じがします。

.table-scroll {/*横スクロール処理*/
  overflow: auto;
  white-space: nowrap;
}
.table-scroll::-webkit-scrollbar {
  height: 5px;
}
.table-scroll::-webkit-scrollbar-track {
  background: #333;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: #999;
}
2022.2.8
html&css

テーブルをレスポンシブにする

ただthとtdを立て並びにするだけです。

.sptable{/*SP用テーブル*/
  width: 100%;
}

table.sptable th,
table.sptable td {/*SP用テーブル*/
  display: block;
  width: 100%;
}