演習課題「td要素のボーダーを優先させよう」
現在、ブラウザには、ぱいじょの生徒である霧島京子と六村リオの数学のテスト結果がテーブルとして表示されています。
また、table要素のborder-collapseプロパティにはcollapseが指定され、現時点ではth要素のボーダーが他のボーダーに比べて太いため、th要素のボーダーが優先されて上に表示されています。
ここで、th要素のボーダーの太さをtd要素と同じ2pxにし、ボーダーのスタイルが二重線であるtd要素のボーダーが優先されて上に表示されるように修正してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「th要素のボーダーを優先させよう」
現在、ブラウザには、ぱいじょの生徒である霧島京子と六村リオの数学のテスト結果がテーブルとして表示されています。
また、table要素のborder-collapseプロパティにはcollapseが指定され、現時点ではすべての要素のボーダーの太さが同じであるため、スタイルが二重線であるtd要素のボーダーが優先されて上に表示されています。
ここで、td要素のボーダーのスタイルをth要素と同じ実線に指定し、th要素とtd要素が重なった部分で隣接する左と上のセルであるth要素のボーダーが優先して表示されるようにしてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃04:ボーダーを重ね合わせる(border-collapse)
このチャプターでは、ボーダーの重ね合わせについて学習します。
テーブルでは通常、テーブル全体と各セルで個別にボーダーが表示されます。しかし、border-collapseプロパティにcollapseを指定することで、これらのボーダーを重ねて一体化させることができます。
複数のボーダーが重なり合った場合、どのボーダーが前面に表示されるかは、以下の優先順位で決定されます。
- 太さ: まず、より太いボーダーが優先されます。
- スタイル: 太さが同じ場合は、以下の順序でスタイルが優先されます。
double>solid>dashed>dotted>ridge>outset>groove>inset - 要素の優先順位: 太さとスタイルが同じ場合は、以下の要素の順序で優先されます。
th要素とtd要素 >tr要素 >table要素
th要素とtd要素のボーダーが重なり合う場合、隣接する左側と上側のセルのボーダーが優先されます。@charset "UTF-8";
table {
border: solid 2px lime;
border-collapse: collapse;
}
th{
padding: 10px 20px;
border: solid 3px blue;
}
td{
padding: 10px 20px;
border: double 2px yellow;
}
@charset "UTF-8";
table {
border: solid 2px lime;
border-collapse: collapse;
}
th{
padding: 10px 20px;
border: solid 2px blue;
}
td{
padding: 10px 20px;
border: double 2px yellow;
}
@charset "UTF-8";
table {
border: solid 2px lime;
border-collapse: collapse;
}
th{
padding: 10px 20px;
border: solid 2px blue;
}
td{
padding: 10px 20px;
border: solid 2px yellow;
}
MDN web docs - border-collapse
https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse