
問題13:テーブルの操作をしよう
少し難易度の高いテーブルの操作をやってみましょう。
見本画像を参考にして実装してください。
見本画像を参考にして実装してください。
期待する画面

解答ソースコード
<table>
<tr>
<th>タイトルA</th>
<th>タイトルB</th>
</tr>
<tr>
<td>カテゴリ</td>
<td>カテゴリ</td>
</tr>
<tr class="borderNon">
<td>カテゴリ</td>
<td rowspan="2">カテゴリ</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>カテゴリ</td>
<td>カテゴリ</td>
</tr>
</table>
¥HTML¥
/* リセットCSS */
tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
padding: 24px;
}
th:nth-child(1),
td:nth-child(1) {
background-color: #e7e7e7;
}
td,
th {
padding: 4px;
}
tbody {
border: 1px solid;
}
tr {
border-bottom: 1px solid;
}
tr.borderNon {
border: none;
}
tr.borderNon td + td {
border-bottom: 1px solid;
}
tr.borderNon + tr > td {
position: relative;
height: 33px;
}
tr.borderNon + tr > td:before {
content: "カテゴリ";
position: absolute;
top: calc(50% - 4px);
right: -32px;
transform: translateY(-50%);
}
table tr:last-child {
border-bottom: none;
}
¥CSS¥
補足
コチラの問題では、解答を見ればわかる通りかなり細かくCSSスタイルの設定が行われています。
解答通り完全一致で無くても、類似した状態までもってこれれば十分な成果です。
ひとつひとつ解説しているとかなり冗長なものになってしまうので、解答に目を通してきになるところはご自身でググって調べてみましょう!
解答通り完全一致で無くても、類似した状態までもってこれれば十分な成果です。
ひとつひとつ解説しているとかなり冗長なものになってしまうので、解答に目を通してきになるところはご自身でググって調べてみましょう!
完了にする!
活動記録をTweetする
1.HTMLの宣言をしてみよう
カラムが結合している部分にはrowspanを入れて結合させ、
heightで直に高さを取り、absoluteで真ん中に配置しております。