テーブルタグに「width」という属性を追加すると、表全体の横幅を指定することができます。なお、表の横幅とは以下の図の「表の幅」の部分のことです。ピクセルによる絶対値で指定する方法と、表示されるウィンドウの幅に対する相対的なパーセントによる指定が可能です。 最初、HTMLのtableタグに、bootstrapにあるclassの.table-responsiveを書きました。 すると、パソコンのブラウザで見えるところのテーブル幅は、それぞれのセル内にある文字数に応じて、横幅が大きかったり小さかったり。まちまちでした。
テーブルは、width を指定する事でサイズを制御できます。パーセントで指定すれば、ブラウザのサイズ変更に対応して伸縮します。問題は、広がるのを制御する事ができるものの、最小幅を指定する事ができません。このページでは、画像を挿入して最縮小幅を制御する打開策を説明します。 セルのwidthを狭くしておいて nowrapにすればいけた。 table { width: 100%; } table th { white-space: nowrap; width: 100px; } th,tdにmin-widthでwidthと同じ幅を指定してあげるだけです。 tbody th { width: 200px; min-width: 200px; } td { width: 130px; min-width: 130px; } See the Pen 横スクロールさせたいtableがうまくいかない…を解消しよう② by bashalog ( @bashalog ) on CodePen .
上記の属性は、HTML 4.01では非推奨とされています。（Strict DTDでは使用できません） 非推奨要素と非推奨属性 HTMLで表を作成してみたい tableタグの基本的な使い方を理解したい 思い通りのレイアウトで表を作成したい HTMLを使用していると、表を作成する機会はよくあると思います。しかし指定できることが多すぎて、使い方についていまいちよくわかっていない方も多いのではないでしょうか？ ここでは、行と列で囲まれた一つの領域を「セル」と呼びますが、HTMLの表でもセルごとに横幅を指定できます。タグに「width」という属性を追加します。セルの横幅とは、以下の図の『セルの幅』に該当 … tableのborderを一つの線に変えたいと思っても、 なかなかうまくいかなかったことも多い のではないでしょう … table { table-layout: fixed; width: 300px; } table,th,td { border: 1px solid #bbb; } .e { width: 15px;} これで指定した列について、コンテンツにかかわらず次のように幅を固定表示できるようになります。なお、幅を指定していない列は均等割り付けになりました。 実行結果
2列×2行のテーブル全体の横幅、高さが200ピクセルでセルの横幅、高さが50%の場合、 各セルの横幅、高さは、200×50％＝100ピクセルということになります。 横幅や高さを 指定しない場合はセル内の文字の長さに応じて自動拡張します。 スマホサイトでtableを扱うとき、横並びになっていたthやtdのセルが、そのままだと横幅が狭いので、これらをブロック要素に変換してひとつのセルごとに横幅100%で表示させることがよくあります。 HTML5のタグ解説.
今回はHTMLで使われるtable（表）のborder（罫線）について解説をしていきます！ borderは基本的にはCSSで設定するものですが、tableのborderは HTML上でも設定をすることが出来ます。.