CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用した空のセルの処理

CSSのempty-cellsプロパティは、テーブルの空のセルの表示を指定するために使用されます。 CSSのempty-cellsプロパティの構文は次のとおりです-

構文

Selector {
   empty-cells: /*value*/
}

例

次の例は、CSSのempty-cellsプロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
   border: groove;
}
table {
   display: inline-block;
}
#demo1 {
   empty-cells: show;
}
#demo2 {
   empty-cells: hide;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<table id="demo1">
<tr>
<th colspan="3">Demo</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Six</td>
</tr>
<tr>
<td></td>
<td>Eight</td>
<td></td>
</tr>
</table>
<table id="demo2">
<tr>
<th colspan="3">Demo</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Six</td>
</tr>
<tr>
<td></td>
<td>Eight</td>
<td></td>
</tr>
</table>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用した空のセルの処理

例 
<!DOCTYPE html>
<html>
<head>
<style>
table * {
   border: ridge skyblue;
   padding: 0.5rem;
}
table {
   margin: 20px;
   display: inline-block;
   box-shadow: 0 0 6px 3px green;
}
#demo1 {
   empty-cells: hide;
}
#demo2 {
   empty-cells: show;
}
</style>
</head>
<body>
<table id="demo1">
<tr>
<th colspan="3">Hide</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table id="demo2">
<tr>
<th colspan="3">Show</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用した空のセルの処理


  1. CSSで比較表を作成するにはどうすればよいですか？

    CSSを使用してレスポンシブテーブルを作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    table {       border-collapse: collapse;       border-spac

  2. CSSでレスポンシブテーブルを作成するにはどうすればよいですか？

    CSSを使用してレスポンシブテーブルを作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, san