2018年02月4日(日)
テーブルに自動で行数を表示する
Result
See the Pen CSS table row numeration by kachibito (@kachibito) on CodePen.
tableに行数を表示します。疑似要素にcss-countersで加えています。
前後に任意のテキストも挿入できます。css
body {/*カウンターリセット*/ counter-reset: row-counter; } tr { position: relative; } tr:before {/*行の頭に疑似要素を追加してカウント*/ position: relative; padding: 10px; display: block; bottom: 0; counter-increment: row-counter; content: "第"counter(row-counter)"行目"; }html
foo bar hoge foo ba... author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
幾何学的なデザインを簡単に生成できる素材セット「Neo Memphis Megaset」
NEXT ›エスプリライフスタイルストアのセールが開催中！ダンスクのホーロー鍋やメニューのワイヤービンなど
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『テーブルに自動で行数を表示する』についてまとめています。
この記事は特にjQueryについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
最近の人気記事
週間人気サイトTOP10
カテゴリー
0
9
6
6
