CSS レスポンシブなtable(テーブル)

html5-css3

480px以下になると、タイトルヘッダー(ht)の段組が変化します。

DEMO1

HTML

[code langages=”html”]
<table class="res_tbl">
<tr>
<th>CSS</th>
<td>Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、…省略</td>
</tr>
<tr>
<th>レスポンシブデザイン</th>
<td>表示された機器の種類やサイズに応じて…省略</td>
</tr>
</table>
[/code]

CSS
[code langages=”css”]
section table { width: 100%; }
section th, section td { padding: 10px; border: 1px solid #ddd; }
section th { background: #f4f4f4; }

/*—————————————————-
.res_tbl
—————————————————-*/
.res_tbl th { width: 30%; text-align: left; }

@media only screen and (max-width:480px){
.res_tbl { margin: 0 -10px; }
.res_tbl th,
.res_tbl td{
width: 100%;
display: block;
border-top: none;
}
.res_tbl tr:first-child th { border-top: 1px solid #ddd; }
}
[/code]

リストバージョン

480px以下でタイトルヘッダー(th)が上に表示され、tdはリストで表示される。

HTML
[code langage=”html”]
&lt;table class="res_tbl"&gt;
&lt;tr&gt;
&lt;th&gt;CSS&lt;/th&gt;
&lt;td&gt;Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、…省略&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th&gt;レスポンシブデザイン&lt;/th&gt;
&lt;td&gt;表示された機器の種類やサイズに応じて…省略&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
[/code]
CSS
[code langage=”css”]
&lt;table class="res_tbl"&gt;
&lt;tr&gt;
&lt;th&gt;CSS&lt;/th&gt;
&lt;td&gt;Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、…省略&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th&gt;レスポンシブデザイン&lt;/th&gt;
&lt;td&gt;表示された機器の種類やサイズに応じて…省略&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
[/code]
 

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

twelve − two =