tableの使い方を理解してスマートフォンでも見やすくする

投稿 2018年08月01日
8
カスタマイズ
InstructionEducationHTMLCSSTipsMFI中級者向け

なんでここでtable使うかなぁ (´・ェ・`)
というレイアウトをよく見かけます。

例えば「商品紹介」「映画などのレビュー」「スポーツのスコア」など。
それらがスマートフォンでどんな風に見えるか確認をしていますか?

というわけでtableの使い方と用途別提案など。

tableの廃止属性と代替CSS

旧式の書き方は以下のようなもの。

<table width="横幅" cellpadding="セル内側余白" cellspacing="セル間余白" border="ボーダー関連" background="背景" style="border-collapse: ボーダーの重なり;">
  <tbody>
    <tr>
      <td align="垂直位置">セル内容</td>
      <td align="垂直位置">セル内容</td>
    </tr>
  </tbody>
</table>

赤字部分の属性は 廃止されています
利用中のテンプレートが html5 であるならばこれらの属性を使うべきではありません。

<table style="width: 横幅%; max-width: 最大横幅px; border-spacing: セル間余白px; border-collapse: ボーダーの重なり; border: ボーダー関連; background: 背景関連;">
  <tr>
    <td style="padding: セル内側余白; vertical-align: 垂直位置;">セル内容
    <td style="padding: セル内側余白; vertical-align: 垂直位置;">セル内容
</table>

廃止属性は全てCSSに置き換えることができます。

「廃止されたから機能が失われた」のではなく、もともとこれらはCSSでスタイリングするべき内容です。
table要素は時と場合によっていろいろなスタイリングを使い分けるべきですので、スタイルシートで決まったスタイルを決めておくことが難しい要素だと言えます。
その場合には廃止属性を用いるのではなく、インラインCSS を利用します。
htmlの style属性 にCSSを直接記載する方法です。

注) html内の style要素 も「インラインCSS」と呼ばれることがありますが、これとはまた別です。
style要素でのCSS指定は Internal CSS (インターナルCSS) と言い換えることができます。

インラインCSS --- style属性

<div class="xxx" style="font-size: 1.2em;">
.
.
.
</div>

インラインCSS(インターナルCSS) --- style要素

<style>
.xxx {
  font-size: 1.2em;
}
</style>

table関連CSSの説明

省略できるタグ

tbodyの開始タグ・終了タグは省略可能。
tr と td の終了タグは省略可能。

tbody は開始・終了タグともに省略できます。つまり書かなくて良し。
trとtdについては終了タグのみ省略可能です。
省略しても良いとされるものについては素直に省略するとhtml量を減らせます。
ただし 構文に自信が持てる場合のみ
省略したタグはブラウザが補完処理を行います。その場合には「正しいと思われる位置」への補完ですから、コーディング自体があやふやであったり間違っている場合などは逆にその「正しさ」がスタイルを崩す原因になることがあります。

widthプロパティとmax-widthプロパティ

tableの横幅をコントロールするには widthプロパティだけでなく max-widthプロパティを併記する。

スマートフォンでの表示不具合を出さないコツは max-width プロパティの使いこなしです。

table要素にmax-widthプロパティの%単位指定は効きません。
厳密には「table要素にmax-widthプロパティは効かない」のですが、実際にはpx指定であれば効力があります。%指定は不可。
widthプロパティには%指定で画面幅との折り合いを、max-widthプロパティにはpx指定で全体幅の制限を行います。
div要素などのように width と max-width の 入れ替え不可 は常に頭に入れておくようにします。

また、tableというのは例えtdにサイズを指定しても、全体の都合によってその指定がことごとく破棄される のも特徴です。
「tdに width: 150px と書いているのに何故か中の画像が80pxになってしまう…」
など。何故そうなるかというと tableだから です。
サイズコントロールについては後述。

padding

セル(td要素)内側の余白指定 padding は table ではなく td に指定します。

html4時代はなんでもかんでもtableに追加すれば良かったのですが、本来のCSSプロパティ paddingcellpadding属性のようなtable要素プロパティではありません
paddingは余白を設けたい要素に直接指定しなければ効力はありませんので、従って padding指定はtdへ 行うようにします。

border-spacingプロパティ

tableはあらゆるところに隙間を作ろうとします。
table要素の隙間排除には border-spacing: 0;
td要素の隙間排除には padding: 0

上記は実際のtable要素で以下のような内容です。

<table style="width: 200px; height: 200px;">
<tr>
<td>
<img src="" alt="" width="200" height="200">
</table>

tableのサイズに縦横 200px を指定し、td内の画像にも 200px を指定しています。
が、実際の画像のサイズは縦横 194px です。
何故6pxも引かれたのか、以下が説明のスクリーンショットです。
tableの隙間の解説

tableはデフォルトでこういうスタイリングなので、セル内要素の寸法が微妙に小さくなったり、あるいはセル内に画像を入れて左右辺をぴったりくっつけたくても隙間が空きます。
デフォルト = 初期値
なので、何も指定しなければ勝手にそうなります。

tableへの border-spacing: 0 と tdへの padding: 0 指定で隙間を無くすことができます。

隙間なし2セルのソース

<table style="width: 100%; max-width: 240px; border-spacing: 0;">
  <tr>
    <td style="padding: 0;">
      <img src="" width="120" height="120" alt="">
    <td style="padding: 0;">
      <img src="" width="120" height="120" alt="">
</table>

隙間のなくし方がわからなくてググりまくるという方が結構多いようなので、この機会に覚えておかれると良いですね。
いつかきっと役に立ちます。たぶん。

border-collapseプロパティ

border の重なり指定は border-collapse プロパティで決定。

ボーダークラプスと読みます。

<table style="width: 100%; max-width: 240px; border: 3px solid green;">
  <tr>
    <td style="border: 3px solid red;">
      <img src="" style="width: 100%;" alt="">
    <td style="border: 3px solid red;">
      <img src="" style="width: 100%;" alt="">
</table>

tableの横幅には240pxを指定してあります。
今この2枚の画像の横幅がいくつかわかりますか (´・ω・`)

答え: 106px
左側の画像を使って計算すると、
左tableボーダー(緑)3px + 左border-spacingの2px + 左tdボーダー(赤)3px + 左paddingの1px + 右paddingの1px + 右tdボーダー(赤)3px + 隣接セルとのborder-spacingの1px(セル間2pxなので片セル1px) = 14
120 - 14 = 106

現時点でborderはそれぞれ独立しています。この状態が初期値で
border-collapse: separate です。
セパレート、つまり「離れる」

<table style="width: 100%; max-width: 240px; border: 3px solid green; border-collapse: collapse;">
  <tr>
    <td style="border: 3px solid red;">
      <img src="" style="width: 100%;" alt="">
    <td style="border: 3px solid red;">
      <img src="" style="width: 100%;quot; alt="">
</table>

tableへの緑ボーダー3px指定はそのままですが、レンダリングでは緑ボーダーは消えています。
tableのボーダーとtdのボーダーが重なったから です。
border-collapse: collapse;
collapse値を指定すると隣接する要素のボーダー同士が重なります。
クラプス、つまり「折りたたむ」
tableボーダーでなくtdのボーダーが表示されている様子もわかりますね。
そしてborder-spacingが無くなっていることもわかります。border-spacingはボーダーが表示されている場合は隣接セルのボーダーとの距離なので、そのボーダーが重なるのですから当然無くなります。

ボーダーの数値が異なる場合。

tableのボーダーを3pxから5pxに変更しました。
太い方が細い方を吸収しています。

ここまでのまとめ「重要プロパティ」
border-spacing --- tableへ指定「セル間余白」
border-collapse --- tableへ指定「ボーダーの重なり(折りたたみ)」
padding --- tdへ指定「セル内側余白」

上記3つをしっかり覚えておくことがtable利用の鍵になります。
ここからは具体的なケーススタディです。

tableのサイズをコントロールしきれていない例

パソコンの見た目

BAD

GOOD

BAD 問題点
・画像とテキストの距離が定まらない

スマートフォンの見た目(横414px)

BAD

GOOD

BAD 問題点
・スマホの画面幅いっぱい使い切っていない
・画像とテキストのバランスが悪い

BAD html

<table style="width: 75%;">
  <tbody>
    <tr>
      <td style="vertical-align: top;">
        <a><img src="" alt=""></a>
      </td>
      <td style="padding-left: 10px; vertical-align: top;">
        <a>The Glass Menagerie ガラスの動物園</a><br>
        (1944年初版)<br>
        Tennessee Williams 著<br>
        <br>
        <a>商品詳細を見る</a><br>
        興味のある方今すぐほしい方は <br>
        Axxxxn から購入もできます!!
      </td>
    </tr>
  </tbody>
</table>

GOOD html

<table style="table-layout: fixed; border-spacing: 0; width: 100%; max-width: 500px;">
  <tr>
    <td style="vertical-align: top; width: 117px; padding: 0;">
      <a><img src="" alt=""></a>
    </td>
    <td style="vertical-align: top; padding: 0 0 0 15px;">
      <a>The Glass Menagerie ガラスの動物園</a>
      <br>(1944年初版)<br>
      Tennessee Williams 著<br>
      <br>
      <a>商品詳細を見る</a><br>
      興味のある方今すぐほしい方は <br>
      Axxxxn から購入もできます!!
    </td>
  </tr>
</table>

BAD htmlはFC2運営が自社ブロガーの著書を紹介する際に用いているソース内容に近いものです(全く同じではありません)
パソコンでの見た目しか考えていないので width: 75% と指定してしまってますが、スマートフォンで横幅が75%ということは、414pxデバイスならば290弱しかありませんので縦伸びして非常に不格好です。
スマートフォンでは横幅を100%使い切る内容にしておくのが望ましいでしょう。

tableのセル(td)は普通に横幅を指定しただけでは 全体幅の都合によって指定が無視されてしまう というのは既に述べました。
横幅を固定したい場合はセルにwidthを px単位 で設け、親要素のtableに table-layout: fixed を指定します。
fixed値を指定し、セルに横幅が記されていない場合には全てのセルが 等分 になってしまいますが、セルに横幅がある場合にはその指定サイズを守るようになります。

tableレイアウトにすべきでない場面

パソコンの見た目

BAD

GOOD

スマートフォンの見た目(横414px)

BAD

GOOD

BAD 問題点
・ひどすぎ

BAD html

<table style="table-layout: fixed; width: 100%; margin-top: 40px; border-spacing: 0;">
  <tr>
    <td style="vertical-align: top; width: 200px; padding: 0;">
      <img src="" alt="">
    </td>
    <td style="vertical-align: top; padding: 0 0 0 15px;">
      オディロンは、1840年4月20日、南フランスの大都市ボルドーで生まれた。
      〜省略〜
      なお、弟のガストン・ルドン(英語版)は長じて建築家となり、世に作品を残している。
    </td>
  </tr>
</table>

GOOD html

<div style="overflow: hidden;">
  <img src="" alt="" style="float: left; width: 40%; width: 200px; margin-right: 15px;">
  <p style="margin: 0;">
    オディロンは、1840年4月20日、南フランスの大都市ボルドーで生まれた。
    〜省略〜
    なお、弟のガストン・ルドン(英語版)は長じて建築家となり、世に作品を残している。
  </p>
</div>

これはもうtableの書き方云々ではなく、tableを選ぶべきではなかった というパターンです。つまり選択のミス。
横に並べたもの同士の高さの差が顕著になることが明らかなので float を利用する場面です。

float要素へのwidth指定は スマートフォンの見た目 を想定して決めます。
やはりここでも width プロパティと max-width プロパティのダブル使いです。

横に並べたい → tableを使う
と考える方がとても多いのですが、そもそもtableは狭い画面とは非常に相性が悪い です。
それを踏まえ、まずは手法の選択から考えるようにしましょう。

レスポンシブか横スクロールか

tableに width: 100% が指定されている場合。
%という指定は相対値ですから、必ず参照する要素があります。
通常は「記事の横幅」です。
テンプレートがレスポンシブデザインかスマホ専用版かに関わらず、スマホではシングルカラムが基本ですから、スマホでの記事幅はスマホの画面幅(ビューポート)とほぼ同等になります。

パソコンでの width: 100% は900pxあるいは1000pxかもしれません。
スマホでの width: 100% は 414px〜320px弱になります。
掲載したいtable要素が 400px程度の画面に収めてもすんなり閲覧ができるかどうか です。

あるいは「widthとmax-widthを併用するのが基本」と書きましたが、旧態然で
<table width="800"> といった書き方をしてしまっている方も多いのではないでしょうか。
width属性では単位が省略されていますが、省略単位は px です。つまり 絶対値 なんですね。
相対値はなにかを参照して自身の幅を決めますが、絶対値は他要素を参照しません。つまり画面幅が400pxしかなくとも800pxで表示を行います。
要するに overflow (オーバーフロー, 溢れ, はみ出し) ですね。
これは絶対避けなければいけませんね。スマホユーザーにとっては不都合極まりないからです(画面ブレ)

はみ出す例

tableが記事幅からはみ出している様子 完全にはみ出してますよね。
tableを使う人の多くが以下のような思考で作業をしています。

記事の領域を知る(記事幅の把握) --- 仮に800pxとする

800pxをセル数で割る --- 800 ÷ 10 = 80

tableに width="800" を記載、tdに width="80" と記載

スマホではみ出す

サンプルはスマホどころかパソコンでもはみ出してますが、わかりやすくするためにワザとそうしています。
多くの方はこの状態に「ならないように」と考えて「いるつもりで」パソコンの記事幅を基準にセルのサイズを算出しようとします。
記事幅の把握など不要ですし、計算なんてしちゃダメです。
計算するからはみ出すんです。どのみちスマホ画面は400px程度。
パソコンのことしか考えていないから無駄な計算をした挙げ句にスマホでめちゃくちゃなレイアウトになる んです。

はみ出さないものの見た目がよろしくない例

そこで width と max-width の併記でもってはみ出させないよう対処したとします。
以下がスマホでの様子。

何がしたいねん。
でもよく見かけます(笑)

こういう場合は素直に 横スクロール を選んだ方が良いですね。
こんな感じです。

Rain Dogs
Tom Waits
The Beat Becomes a Sound
Late Night Alumni
The Sickness
Disturbed
Nothing to Lose
Billy Talent
Little L
Jamiroquai
I Love College
Asher Roth
Rage For Order
Queensryche
Keep Myself Alive
Get Scared
Around The World
Red Hot Chilli Peppers
9 Crimes
Damien Rice

横スクロールソース

<style>@keyframes fade-reverse{0%{transform:translateX(50%);opacity:0}50%{transform:translateX(0%);opacity:1}100% {transform:translateX(-50%);opacity:0}}
.fade-reverse{position:absolute;top:0;left:15px;animation:fade-reverse 1.8s linear infinite;}</style>

<div style="position: relative; overflow-x: auto; padding: 30px 0; -webkit-overflow-scrolling: touch; white-space: nowrap;">
  <table style="table-layout: fixed; width: 100%; border: 1px solid rgb(200,200,200); border-collapse: collapse; background-color: white; color: rgb(51,51,51); text-align: center;">
    <tr>
      <td style="width: 130px; padding: 5px; border: 1px solid rgb(200,200,200);">
        <img src="" alt="">
      <td style="width: 130px; padding: 5px; border: 1px solid rgb(200,200,200);">
        <img src="" alt="">
      <td style="width: 130px; padding: 5px; border: 1px solid rgb(200,200,200);">
        <img src="" alt="">
    <tr>
      <td style="padding: 5px; border: 1px solid rgb(200,200,200); white-space: normal;">
        <span style="font-weight: bold;">Rain Dogs</span><br>
        Tom Waits
      <td style="padding: 5px; border: 1px solid rgb(200,200,200); white-space: normal;">
        <span style="font-weight: bold;">Rain Dogs</span><br>
        Tom Waits
      <td style="padding: 5px; border: 1px solid rgb(200,200,200); white-space: normal;">
        <span style="font-weight: bold;">Rain Dogs</span><br>
        Tom Waits
  </table>
  <img class="fade-reverse" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAA/CAMAAABD2rE4AAAAb1BMVEUAAADJycvKy83Hx8nIycvMzM7LzM5HSEuHiIxGR0qRkpRPUFSkpad0dXhiZGdrbG6PkJJ4eXxcXV9WV1qBgoTAwMKdnaCzs7W3t7l+foFKS06oqavExce6u71wcXO8vcCvsLKhoaOZmpxnaGytra+fBpWtAAAAB3RSTlMAiGbMqiJEj4K0oQAAAd5JREFUSMfVlemSqjAQhVvUOTSBhIQdFNf3f8arESZTU0ji/TenyiTgx6G7s0A/dMp1VtYUJg0wwCINgTvu9fWSS0brh7fA0Q5KKD994Qk6AH46RzmNevbTCcfTSGDjp/GfNEefef9Nmj/zjqhqj8G0AMDQgZEwCmkeTZj38Owqg47ac/MVluXJxsNQB1+WVpJhlAREFFLB0i7i3Y11iHeCzm0P71zWk6mBzuv9W3r3GqTIbD/aZOPV9e1ojVt8w/z/JlZSyd+RODpGQjSgt5W89/ZNKzQ/aMosUPVQw3kYed2bUpaPVnH2poIpz9750xUgivhl5U4IWeyXIiHgeUtOp89EOzUq/xEJ9djYM2r2XpLzLriijhNX7wU5b4MjjUh9dK0sItHYn4t7TQp3KnBy3qsaOSWB7cubfXSGlMB75+2nQcH0hcDBNNcfeGtcv+k2abyfSEs7eeMuuAqlOSWJexhsZ73kPJAuUNn1HSbANocg+IjCptoF0TVG+wxOIbTm5NUFRS7QPrtIIKAsLcR8EuDspUt03yNR+QNp3JYrtuvwFcZdGBSRZyJrd/FlYNbc6zlH574Su5itHS7a9wUxv2/d0A/L8BloFjYHkiV4Jxb3bAy96K2Wl8ZA6/oHGGYccQ+YFt4AAAAASUVORK5CYII=" alt="" width="30" height="42">
</div>

スワイプアイコンはオマケで付けてあります。
重要プロパティは緑の部位。

まずdiv要素。
table全体をdivで囲い、divに white-space: nowrap を指定。
これを指定することでtableのshrink(縮む)を不可にします。
同じくdivに overflow-x: auto を指定。これで横スクロールバーが出るようになります。
(auto値は横幅が超過するまで出ません)
-webkit-overflow-scrolling: touch はiPhoneで感性スクロールを効かせるために必要です。
position: relative はabsolute配置するスワイプアイコンの基点にするためです。
スワイプアイコンのアニメーションはstyle要素でhtmlの上に入れておくと良いでしょう。
(利用頻度が高い場合はスタイルシートへ)

続いてtable要素。
サンプルの場合は画像のサイズに合わせた方が綺麗なので、セル横幅は画像サイズを最優先します。
何度も書きますがtableのセルは得て勝手にサイズが変えられてしまいますので、table-layout: fixed でそれを防止します。
下段はテキストです。テキストは折返しが効きますので、画像の横幅を超えないよう white-space: normal を指定します。
div要素に white-space: nowrap を指定しており、このプロパティは継承しますので normal 指定をして戻します。でないと折り返しません。

tableの横スクロールは少しだけテクニックが必要ですが、サンプルソースをひな形として取っておくと応用が効くと思います。

まとめ

table要素はtrやtdなどの部品がありますのでややこしいですね。
そしてtableの持つ shrink to fit が他要素、例えばdiv要素などと真逆の性質なので同じ感覚で使っているとハマります。
FC2ブロガーさんでtableを利用しているほとんどのユーザーがスマホで閲覧困難な状況に陥っています。
どれもこれも「慣れ」と「要領」なので、雛形を活かしてみてください。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

8 COMMENTS

There are no comments yet.

べえ  

No title

こんにちは。

おお!!ついにレスポンシブテーブルがやってきた ^^
と、期待したのですが、ちょっと違いましたw

テーブルといえば、エクセルのような文字だけの
一覧表のためのタグだと思っていたのですが、
どちらかというと画像配置のためのお話でびっくりです。

文字だけの一覧表はあまり意味がないのでしょうか?
エクセルのシートとかpdfファイルをダウンロードできる
ようにした方がスマートなのかな?

文字だけの一覧表でも、すぐにはみ出すので、ネットで
拾ったレスポンシブCSSを入れていますが、Akira さんの
おしゃれなデザインを期待していました ^^;;

2018/08/01 (Wed) 21:34
vanillaice (Akira)

Akira  

To べえさん

こんばんは (o'ω')ノ

> ついにレスポンシブテーブルがやってきた〜

一般的な「レスポンシブテーブル」という手法(?)はtableを始めtrやtdなどのdisplay値の総入れ替えです。
なのでstyle属性でどうこうできるものではないんですね。
スマホのブレイクポイントを設定し、

tr, td {
displya: block;
}

みたいな感じでレイアウト構成をtableでなくblockとして詰めていく方法です。
なので根本的に違うというか、本記事のようにstyle属性だけでできるものではありません。
クラス名も必要になってきますし(でないとカレンダーなど他のtable要素も変化してしまいます)、CSSを50〜70行ぐらい書かないといけないですね。

-------
> どちらかというと画像配置のためのお話でびっくりです〜

画像は関係ないですよ。視覚的にわかりやすいのでサンプルにしただけです。
そしてtable利用が一番最初に書いたように「レビュー」や「商品紹介」などで用いられるパターンが多いので例えに取りました。
テキストは基本的に「折返しができる」要素なのでテキストを例えにすると「widthとmax-widthを指定しましょう」だけで済んでしまいます。
tableはもともとの性質がレスポンシブみたいなもんなので、横幅の絶対値指定を避ければ縮みます。
縮みはするけれども、それが見易いかどうか、というのが本記事の主旨というか。
セルは折返しが効きませんので、縮めるのが良いのか、それとも敢えて横スクロールにするのか、という視点です。
テキストにしても横に2〜3文字しか並ばずに折り返してばっかだと読みづらいですしね。

私個人としてはスマホでdisplay値変更による並び替えをするならば最初からdl要素で書けば良いと思います(笑)
そしたらパソコンとスマホの見た目が統一できますし。table使わなくても良い気がします (´・ω・`)
今べえさんのサイトを拝見しましたが、dl要素をおすすめします(笑)
そしたらCSS減らせますしね。セマンティクスを考えても表でも定義リストでも構わない内容だと思います。

-------
> 文字だけの一覧表はあまり意味がないのでしょうか?〜

そんなことは全く無いですよ。スポーツのスコアなんて数字だけですし(笑)
その数字でも
12点
と表示される方が
1
2

となってしまうよりずっと良いですよね、テキストだって得て勝手に折り返さないようにするにはtdへのwidth指定が必要だよね、ということでやり方を紹介しています。

------
> エクセルのシートとかpdfファイルをダウンロードできるようにした方がスマートなのかな?〜

内容にもよりますが、個人的にはpdfファイルのダウンロードはしたくないです(笑)

------
> おしゃれなデザインを期待していました〜

デザインはどうにでもなりますよ。べえさんの言う「おしゃれ」がどんなものかはわかりませんが。

2018/08/01 (Wed) 23:49

べえ  

Akira さんこんにちは。

さっそくdl要素を勉強してみます ^^
ありがとうございました。

2018/08/02 (Thu) 01:15
vanillaice (Akira)

Akira  

To べえさん

そうですね。今だとランドスケープにした時に右側が見られなくなっていますのでいっそ最初からスマホと同じレイアウトでも良いかもしれません。
(横倒しで文字などが大きくなるのは -webkit-text-size-adjust の指定が無いため)
でも今でも上手く調整できていると思いますよ。
デザインを揃えれば特に違和感も無いでしょうし。

dl要素にするとパソコンでの見た目が右側が寂しいかもしれませんね。
そのあたりはべえさんのご判断でお願いします。

2018/08/02 (Thu) 01:23

hige  

tableは難儀です

 HTML/CSSを覚え立ての頃、tableタグの存在を知って、あれこれ使ってました。
 Akira氏にも質問したりして、その節は度々お世話になりました。
 今はflexboxとか、画像+文章の場合はfloatを使ってますが。
 記事で書かれてる中心の話題とは別に、物理とか私の大好きな電子工作の様な、縦横に数項目が必要な表が出て来る場合、見易いのは絶対tableタグの表です。
 で、スマホ上で画面上に収ってくれるように、項目の見出しを縦に並べるのか横に並べるのが良いのかとか、欧文フォントの横幅が狭いのを捜したり(今のところGoogleFontsのRobot)、font-sizeを小さくしたり。
 Akira氏が書かれているように、tableも画面の横幅をどんどん狭めていくと、セルも狭まっていきますが、数式の代数や変数の文字列が折り返されては何のことか判らなくなるので、それなりに最低限の横幅が必要です。
 結局 overflow-y: hidden でtableの部分だけ横スクロールで見れるようにするのですが、Firefoxではどうやってもスクロールバーの常時表示が出来ない。
 スマホ対応では、tableが持ってる本来の(エクセルの様な)表の表示はきついです。
 条件毎に箇条書きにするのかとかの全く違う表現が必要なのかなと思ったりして。

 あれこれ考えるのも結構楽しいのではありますが、すんません、感想文の投稿、ご容赦。

2018/08/02 (Thu) 18:57
vanillaice (Akira)

Akira  

To higeさん

こんばんは ('0')/

> 条件毎に箇条書きにするのかとかの全く違う表現が必要なのかな〜

こういう場合にはコメント欄でチラっと出てますが「レスポンシブテーブル」を利用することになりますかね。
個人的に「レスポンシブテーブル」という名称にはすごく違和感があるんですけどね(笑)
結局のところdisplay値の操作をすればどうにでもなるというか、もう既にそれtableじゃなくね?みたいな感じにしてしまう、ってことですよね。スマホでは。

tableの「横に並べる」という特性をスマホで「縦に並べ替える」ようにすると今度は比較対象が困難になりますよね。
tableは同じ種の項目が上下に並ぶわけなので比較には向いているレイアウトです。
その場合にはやはり縦に変更するのではなく横スクロールの方が良いような気がしますよね。

スクロールバーの可視・不可視はMacではどのブラウザでももともとスクロールバーは出ませんので、Macユーザーはそれほど重要視してないと思います。
Winは常に出てますよね。しかも外付けで
Macのスクロールバーは内付けなので場合によってはMacとWinではブレイクポイントが異なるという点をたぶんWinユーザーさんはあまりご存知ないような (´・ω・`)
メイソンリーなんかは一定横幅でよく崩れてますね。あぁ、Winで制作されているのだなぁ、ぐらいであまり気に留めていませんが。

スマホも基本的にスクロールバーは出ないので分かりづらい(コンテンツがきっちり収まっているように見えるなど)場合は本文にあるようなスワイプ可能を示唆するアイコンは必要かもしれませんね。
右が見切れていれば大抵の人は本能的にスクロールしてみるのでしょうが。

2018/08/02 (Thu) 20:22

hige  

 あれま。Macではスクロールバーは常時表示ではないのですか。
 MacとかiPhoneは持ってないのでやっぱニュアンスがピンと来てませんねぇ。
 気になる!

 なのであればスマホのChromeだけの対策のスクロールバー表示用の webkit-scrollbar なんて、やらなくてもいいかもと。

 Akira氏がおっしゃる様に、私が採用したのは、結局、表は横長で、横スクロールで、セルの途中で画面上で切れてる感じです。
 横スクロールがあるというアイコンの表示は、あると良いなぁと思ってたのですが、能力を超えてたので出来ませんでした。
 記事を勉強させて貰います。
 
 メイソンリーってなに?
 ググってみましたが、フリーメーソンの関係がヒットして、??????

2018/08/04 (Sat) 00:26
vanillaice (Akira)

Akira  

To higeさん

higeさん、こんばんは ('0')/

はい。Macは出ません。スクロールしている時のみクリアタイプのバーが出ます。

> webkit-scrollbar なんて、やらなくてもいいかも〜

私もそう思います(笑)
メイソンリーというのはこういうのです ↓
https://vanillaice000.blog.fc2.com/blog-entry-712.html
https://vanillaice000.blog.fc2.com/blog-entry-385.html

大きさの違うアイテムが隙間を埋めるように配置されるタイプ。レンガの意味で「masonry」です。
フリーメーソンはもともとはレンガ職人(石工技師)のギルドですよね。
メイソンリーレイアウトが崩れるのは
JSの条件分岐に
$(window).on('load resize', function(){
var xxx = $(window).width();
var yyy = 767;
if (xxx <= yyy) {
}
else {}
});
こういうことするとMacでほぼ確実に崩れますね。
何故ならWinのウィンドウサイズ767はMacのウィンドウサイズ約784だからです。
Macユーザーはそのあたりの事情を知っているので上記のような分岐は使わないですね。たぶん (´・ω・`)

2018/08/04 (Sat) 01:10

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)