※この記事ははてなブログ、別アカウント(hyiromori)から引っ越しました はじめに タイトルのような、とても大変な要件のテーブルを作って欲しいという要望があったので、その際に試行錯誤した結果を記録しておいたエントリです。 サンプル コードの解説 このコードではposition: stickyを使用することで、テーブルの行、列を固定しています。 position: sticky は top right bottom left と組み合わせて使うことで position: relative と position: absoluteを組み合わせたような動きが可能になる指定です。 Safari ではposition: -webkit-sticky;のようにベンダープレフィックスをつけないと動作しませんでした。 詳細はMDNの解説をご覧ください。 position: sticky の対応状況
親要素がdivなどのブロック要素の場合、何もしないと横幅がいっぱいになります。 下記は青背景が親要素、オレンジ背景が子要素です。後述する方法の比較のため兄弟要素にspanタグをいれています。 divの兄弟要素のspan <style> .example{ background: #77abd8; } .example>*{ background: #d3a142; } </style> <div class="example"> <a href="#">子要素(aタグ)</a> </div> <span>divの兄弟要素のspan</span> この親要素を子要素の幅に合わせましょう。
管理しているホームページ社会福祉法人つくし園 の求人情報のページで、 tableを使って求人詳細を表示しているのだけど、 iPhone6・7・8で確認した時に、なぜか一部のページだけtableがはみ出ていた。 同じ、テンプレート、CSS（スタイルシート）を使っている別のページは問題ないので chromeのデベロッパーツールを使って確認しても原因がかわからず、2時間ほど悩んだ。 はみ出している状態 ↑が右側にはみ出していて、全部表示できていない状態。 table.recruit { width: 100%; margin: 0 auto; border-collapse: separate; border-spacing: 0px 15px; } width:100%;も設定しているのに大幅にはみ出している。 ↓は、同じテンプレート、CSSを使っている別の求人詳細のページ。 はみ出していない
これは IE11 を除く Chrome, Firefox など通常のブラウザで動く． この表には難しい部分がある． table に border-collapse: collapse; を指定して，セルの枠線を重なり合わせて表示させるとスクロール時に枠線がそのままスクロールしてしまって，代わりに下にある動いているテーブルが見えてしまう． border-collapse: separate; (デフォルト)の場合はこの問題は起きないのだが，collapase を使う場合は困ってしまう． その場合，うまくやっている方がいた． ありがたく，「CSSでテーブル表の一部を固定してスクロールする方法」をそのまま利用させてもらうことにした． 要は擬似要素を使って，もう一つ枠を上に作るイメージだ． -1px というのはつまり，collapse を使っている場合，枠は th や td に存在していなくて，t
CSS テーブル（表）の見出し部分（一部）を固定してスクロールする方法 サイトで、表（テーブル）を使って表示したいことがあると思いますが、行の幅が横長になり、スペースに入り切らなかったり、縦の列も長くなりすぎて、デザイン上や見た目あまりよろしくないことがあるかと思います。 そこで、HTML の表（テーブル）が、「Excel のウィンドウ枠の固定」のように、見出し部分のセルだけ固定してスクロールできないものか調べてみた結果、CSSプロパティの「position: sticky;」を使用すれば、比較的簡単に実装できたので、ここに記載しておきます。 下記それぞれ4つのパターンのソースコードがありますが、本サイトで使用している「Wordpress + テーマ（Lightning）」では、一部の「CSS」が反映されないところがあるため、掲載している「HTML、CSS コード」は、一般的にHTMLサイ
行（横軸）を固定してスクロールする 縦にスクロールしてください。 上部の「見出し」だけ固定され、他の要素だけスクロールしていることが確認できます。 ↓ HTMLコード <table> <tr> <th class="fixed01">見出し</th> <th class="fixed01">見出し</th> <th class="fixed01">見出し</th> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> </table>
HTMLのチェックボックス要素（input[type="checkbox"]）で表示される□は、閲覧環境によっては小さく表示されてしまい、チェックを入れたり外したりしにくい場合がある。 その場合の対処法として、 チェックボックスそのものをCSSで拡大する（参考：チェックボックスやラジオボタンを大きくする方法: 小粋空間、チェックボックスを大きくしたい - Qiita） LABEL 要素を用いて、有効な範囲を拡大する チェックボックスの代替として、画像＋JavaScript 等でなんとかする といった方法があると思われる。 で、2. の手法でやろうとしたのだが、条件を チェックボックスを、TABLE 内の TD 要素下に置く TD の高さや横幅は不定 TD 内部全体を有効範囲としたい チェックボックスそのものは、TD要素の上下左右中央に表示 のように定めたところ、どうやって CSS を書けば
tableのcolでCSSのtext-alignが効かない！というどぅーでもいい話
全然、科の話では無いのですが授業ネタ。 最近、AKBの総選挙があって、それをネタにHTMLのtableを練習しよう！というお題をやっていました。で、票のところは数値なので、右寄せにしたいじゃないですか！ で、colgroupを使って右寄せにしようとしても、それは反映されません。これはブラウザの実装の問題ではなく、そもそもtext-alignは指定されたブロック要素の中に在るインライン要素に対する指定で、これがtdやthなら有効なのですが、colやcolgroupはtdやthの親要素ではないという扱いなので、こうなります。table要素も他のブロック要素と違う振る舞いをする面もあり、悩ましいですね。これを何とかしようとすると、右寄せしたいtdにclassを設定して、そのstyleでtext-alignを使うしかありません、縦一列を一元化して指定したくても、出来ません。 colって何のために在
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog 「ある列だけを改行なしにしたい」というときが結構あります。 確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。 ソースの見栄え的にもいただけない感じ。 そこで、col や colgroup が使えるんじゃないかと思い、事あるごとに試していました。 が、どうしてもうまくいきません。 col と colgroup の組み合わせ方を変えてみたり、CSS の設定を工夫してみたり、いろいろ試しましたが結果は同じ。 ただ、設定したスタイルの中でも適用されるものと適用されないものがあり、その違いがよく分からないままだったので、どうもしっくりこない状態なのでした。 んで今回も似たような場面に遭遇したので改めて調べ
colgroup要素は、表の列をグループ化します。この要素は、table要素の子要素として使用します。 <colgroup span="3"></colgroup> <colgroup> <col span="1"> <col span="2"> </colgroup> span属性は、colgroup要素内にcol要素がない場合にのみ、指定することができます。 colgroup要素を使用すると、1つ以上の列を意味的なまとまりとしてグループ化することができます。 次の例では、5列の表を3つのグループ（1列：2列：2列）に分けています。 <colgroup span="1"></colgroup> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> グループ化の指定を行なうと、グループ単位でスタイルを設定できるようになり
はじめに 企業向けシステムでは、ヘッダ固定テーブルの実装を要求されることがある。ヘッダ固定テーブルとは、 テーブル（<table>タグ）である テーブルの横に、テーブル部分のみのスクロールバーが表示される テーブル部分のみのスクロールバーでスクロールしても、テーブルのヘッダ行はスクロールしない といった特徴を持つもので、いわばExcelの［ウィンドウ枠の固定］機能のWebアプリ版だ。 CSSで実装するには Pushpin Headerと呼ばれるテクニックがある。positionプロパティを巧みに使った華麗なテクニックだ。ちなみに私は、このテクニックを初めて見たときは理解できなかった。positionプロパティについての正確な知識がないと、理解は難しい。 Pushpin Headerテクニックの問題点 上記リンク先のページをSafari*1で表示すると、ヘッダとボディの間にスペースが空いてし
{"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"slots":false,"live_games":false,"is_live_dealer":false,"payment_methods":false,"sport_types":false,"live_streaming":false,"cash_out":false}]} ウェルカムボーナス {"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"sl
table カラムの colspan と nth-child の相性問題
主に C#.NET と VB.NET の違いについて、メモを残していきます。 誤り等があれば、コメントから知らせていただけるとありがたいです。 ※載せているソースについて検証はしていますが、無保証です。 この記事のテーブルレイアウトで苦労したのでメモ。 例えば、列数 ＞ 2 のテーブルの先頭 2 列を色指定したい場合、nth-child を使うと簡単にできる。 [CSS] /* td と th の先頭 2 列を指定 */ td:nth-child(-n+2), th:nth-child(-n+2) { background-color: purple; } しかし、先頭 2 列に colspan=2 が含まれる場合・・・ [HTML] <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan=2>1-2</td
ですが、同じCSSを使っていてもこんな感じでレイアウトが崩れてしまう場合があります。 （なぜか、中見出しが「100px」になっていない） 見出し これは最初にcolspanが出てきてしまうと、残念ながらこのように崩れてしまいます。 それでは、なぜcolspanで「table-layout:fixed」の効果がなくなってしまうのでしょうか。 これは、「table-layout:fixed」の仕組みが最初の＜tr＞行でレイアウトを決めて固定化してしまう仕組みになっているからなのです。 ですので、最初の行に「colspan=”3″」があると、その時点でcolspanでまとめられてしまった＜td＞列は、きれいに3等分されて「fixed（固定化）」してしまったのです。（最初の行移行では、「table-layout:fixed」の効果はない） この現象を防ぐには、どうすればいいのかというと最初に表示す
CSSの小技 その7 今回は「nth-child()で要素の指定」です。 今までのデモページで使用していましたが、nth-child()について もう少し掘り下げていきたいと思います。 用途 テーブルやナビゲーションや横並びなどで、何番目かの要素に特定の装飾をしたいときに、 今までですとclassを加えて装飾していましたが、nth-child()を使うことで便利に、かつ綺麗なソースで構築する事が出来ます。 実装方法 今回は前回使ったナビゲーションで説明します。 ナビゲーションの順番によって要素の色を変更し、1番左の要素の横幅を半分にします。 ひとつ目の要素はfirst-childで指定することも出来ます。 CSSは下の方に記述しています。 HTML <nav> <ul> <li><a href="#">HOME<span>ホーム</span></a></li> <li><a href="#
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
