レスポンシブ対応のテーブルデザインです。
スマートフォンで見た時でもすっきり見やすく、極力コードもシンプルなものを集めました。
使い勝手がそれぞれ違うので、使用するテーブルの要素に合わせてお使いください。
レスポンシブの制御はcssのメディアクエリ(@media)で対応しています。
記述はこちら
@media only screen and (max-width:480px) {
/*幅480px以下の時のcssを記述*/
}
| ネコの定義 | イエネコの起源は、ネズミを捕獲させる目的で飼われ始めたヨーロッパヤマネコの家畜化であり、ヨーロッパヤマネコの亜種とされることもある。ヨーロッパヤマネコの学名をより記載の早いイエネコと同じFelis catusとする説もあったが、2003年にICZNの強権によりF.catusはイエネコのみを指す学名として、野生種の学名はF.silvestrisを引き続き使用することが認められた。 |
|---|---|
| イヌの定義 | 古く日本ではヤマイヌ（狼）に対して「イエイヌ」とも言っていた。英語名 domestic dog は、伝統的な学名 C. familiaris（家族の-犬）を英訳にしたもので、日本では domestic dog の訳語として古来からのイエイヌの語をあてるようになった。 |
<table class="cp_table">
<tr>
<th>th要素</th>
<td>td要素</td>
</tr>
<tr>
<th>th要素</th>
<td>td要素</td>
</tr>
</table>.cp_table *, .cp_table *:before, .cp_table *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_table {
width: 100%;
border-collapse: collapse;
}
.cp_table th, .cp_table td {
padding: 10px;
border: 1px solid #dddddd;
}
.cp_table th {
width: 30%;
text-align: left;
background: #f4f4f4;
}
@media only screen and (max-width:480px) {
.cp_table {
margin: 0;
}
.cp_table th, .cp_table td {
width: 100%;
display: block;
border-top: none;
}
.cp_table tr:first-child th {
border-top: 1px solid #dddddd;
}
}| ネコ | イヌ | トリ | ウサギ | |
|---|---|---|---|---|
| 解説 | イエネコの起源は、ネズミを捕獲させる目的で飼われ始めたヨーロッパヤマネコの家畜化であり、ヨーロッパヤマネコの亜種とされることもある。 | 古く日本ではヤマイヌ（狼）に対して「イエイヌ」とも言っていた。日本では domestic dog の訳語として古来からのイエイヌの語をあてるようになった。 | 鳥類の生活と繁殖は、ほとんどの陸上生息地で営まれており、これらは7大陸すべてで見ることができる。 | 最も広義にはウサギ目、狭義にはウサギ科、さらに狭義にはウサギ亜科もしくはノウサギ亜科 Leporinaeの総称である。 |
<table class="cp_table">
<thead>
<tr>
<th> </th>
<th>th要素</th>
<th>th要素</th>
<th>th要素</th>
<th>th要素</th>
</tr>
</thead>
<tbody>
<tr>
<td>tdタイトル要素</td>
<td>td要素</td>
<td>td要素</td>
<td>td要素</td>
<td>td要素</td>
</tr>
</tbody>
</table>.cp_table *, .cp_table *:before, .cp_table *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_table {
width: 100%;
border-collapse: collapse;
}
.cp_table th {
width: 13%;
background: #f4f4f4;
padding: 10px;
border: 1px solid #dddddd;
}
.cp_table td {
text-align: left;
vertical-align: top;
padding: 10px;
border: 1px solid #dddddd;
}
.cp_table td:first-child {
text-align: left;
vertical-align: middle;
font-weight: bold;
}
@media only screen and (max-width: 480px) {
.cp_table {
display: block;
width: 100%;
}
.cp_table thead {
display: block;
float: left;
overflow-x: scroll;
}
.cp_table tbody {
display: block;
width: auto;
overflow-x: auto;
white-space: nowrap;
}
.cp_table th {
display: block;
width: auto;
border-width: 1px 0px 0px 1px;
border-color: #dddddd;
border-style: solid;
}
.cp_table th:last-child {
border-bottom: 1px solid #dddddd;
}
.cp_table tbody tr {
display: inline-block;
margin: 0;
}
.cp_table td {
display: block;
border-width: 1px 1px 0px 1px;
border-color: #dddddd;
border-style: solid;
}
.cp_table td:last-child {
border-bottom: 1px solid #dddddd;
}
}| ネコ | アビシニアン | アメリカンカール | アメリカンショートヘア | アメリカンボブテイル |
|---|---|---|---|---|
| イヌ | アーカンソー・ジャイアント・ブルドッグ | アーフェンピンシャー | アイスランド・シープドッグ | アイディ |
<table class="cp_table">
<tr>
<th>th要素</th>
<td>td要素</td>
<td>td要素</td>
<td>td要素</td>
<td>td要素</td>
</tr>
<tr>
<th>th要素</th>
<td>td要素</td>
<td>td要素</td>
<td>td要素</td>
<td>td要素</td>
</tr>
</table>.cp_table *, .cp_table *:before, .cp_table *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_table {
width: 100%;
border-collapse: collapse;
}
.cp_table th, .cp_table td {
padding: 10px;
border: 1px solid #dddddd;
}
.cp_table th {
background: #f4f4f4;
}
.cp_table th, .cp_table td {
width: 20%;
text-align: left;
}
@media only screen and (max-width: 480px) {
.cp_table {
margin: 0;
}
.cp_table tr {
display: block;
margin-bottom: 10px;
}
.cp_table th {
display: block;
width: 100%;
}
.cp_table td {
display: list-item;
list-style: none;
width: 100%;
margin-left: 1em;
border: none;
position: relative;
}
.cp_table td::before {
font-family: 'FontAwesome';
position: absolute;
top: .9em;
left: 0;
content: ' \f0da';
}
}| ネコ | イヌ | |
|---|---|---|
| 寿命 | ネコは1歳くらいになると生殖可能年齢を迎え、7歳あたりから高齢期に差し掛かり、20歳超えはかなりの長寿とされる。 |
イヌは10歳になると老犬の域になり12歳から20歳程度まで生きる。 |
| 知能 | 知能は哺乳類の中でも高い部類に属し、人間とのコミュニケーションもかなりできることが、イヌと並ぶ愛玩動物の地位を獲得した要因となっている。 |
全般的に高い知能を有する。また、品種によってはより優れた学習能力を示す。 |
| 起源 | イエネコの起源は、ネズミを捕獲させる目的で飼われ始めたヨーロッパヤマネコの家畜化であり、ヨーロッパヤマネコの亜種とされることもある。 |
イヌは最も古くに家畜化された動物であり、手に仔犬（イヌかオオカミかはっきりしない）を持たせて埋葬された、1万2千年ほど前の狩猟採集民の遺体が、イスラエルで発見されている。 |
<table class="cp_table">
<thead>
<tr>
<th></th>
<th>上のth要素1</th>
<th>上のth要素2</th>
</tr>
</thead>
<tbody>
<tr>
<th>左のth要素</th>
<td label="上のth要素1"><p>td要素</p></td>
<td label="上のth要素2"><p>td要素</p></td>
</tr>
<tr>
<th>左のth要素</th>
<td label="上のth要素1"><p>td要素</p></td>
<td label="上のth要素2"><p>td要素</p></td>
</tr>
<tr>
<th>左のth要素</th>
<td label="上のth要素1"><p>td要素</p></td>
<td label="上のth要素2"><p>td要素</p></td>
</tr>
</tbody>
</table>.cp_table *, .cp_table *:before, .cp_table *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_table {
width: 100%;
border-collapse: collapse;
border-right: 1px solid #dddddd;
}
.cp_table thead th {
padding: 10px 15px;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
background: #dddddd;
}
.cp_table thead th:last-child {
border-right: 1px solid #dddddd;
}
.cp_table tbody th {
padding: 10px 15px;
vertical-align: top;
border-bottom: 1px solid #ffffff;
background: #dddddd;
white-space: nowrap;
}
.cp_table tbody tr:last-child th {
border-bottom: 1px solid #dddddd;
}
.cp_table tbody td {
padding: 10px 15px;
vertical-align: top;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
background: #ffffff;
}
@media only screen and (max-width:480px) {
.cp_table thead {
display: none;
}
.cp_table tbody th {
display: block;
}
.cp_table tbody td {
display: block;
padding: 10px 5px;
}
.cp_table tbody td::before {
font-weight: bold;
float: left;/*上のth要素が長い場合こちらを解除すると1段落下り見やすくなります*/
padding: 0.5em 0;
content: attr(label);
}
.cp_table tbody td p {
padding: 0.5em 0 0 1em;
margin: 0;
}
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info