※この記事ははてなブログ、別アカウント(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> この親要素を子要素の幅に合わせましょう。
これは 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> グループ化の指定を行なうと、グループ単位でスタイルを設定できるようになり
{"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
ですが、同じCSSを使っていてもこんな感じでレイアウトが崩れてしまう場合があります。 （なぜか、中見出しが「100px」になっていない） 見出し これは最初にcolspanが出てきてしまうと、残念ながらこのように崩れてしまいます。 それでは、なぜcolspanで「table-layout:fixed」の効果がなくなってしまうのでしょうか。 これは、「table-layout:fixed」の仕組みが最初の＜tr＞行でレイアウトを決めて固定化してしまう仕組みになっているからなのです。 ですので、最初の行に「colspan=”3″」があると、その時点でcolspanでまとめられてしまった＜td＞列は、きれいに3等分されて「fixed（固定化）」してしまったのです。（最初の行移行では、「table-layout:fixed」の効果はない） この現象を防ぐには、どうすればいいのかというと最初に表示す
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
What is this? Pushpin Header Technique - Updated 3/20/2006 Shopper Name First Name Last Name User ID Status C2C Fishing John Doe C2C Fishing Enabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone
CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;
CSSでヘッダを固定したスクロールテーブルを作る方法を紹介します。 １．はじめに 次のようなHTMLでテーブルを作成しました。 <style> table { border-collapse: collapse; border-spacing: 0; } th { background-color: #ccc; } th, td { border: 1px solid #666; padding: 5px; } .key, .value { width: 100px; } </style> <table> <thead> <tr><th class="key">キー</th><th class="value">値</th></tr> </thead> <tbody> <tr><td class="key">1</td><td class="value">aaa</td></tr> <tr>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
