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

CSSでのテーブルレイアウトの制御

CSS table-layoutプロパティは、テーブルの行、列、およびセルをレイアウトするためにブラウザが使用するアルゴリズムを定義するためのものです。これにより、テーブルのレイアウトを制御できます。

構文

CSStable-layoutプロパティの構文は次のとおりです-

Selector {
   table-layout: /*value*/
}

次の例は、CSSテーブルレイアウトプロパティ-

を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
table {
   margin: 2em;
   display: inline-block;
   border: 1px solid black;
}
td {
   border: 1px solid black;
}
#one {
   table-layout: auto;
   width: auto;
}
#one + table {
   table-layout: fixed;
   width: 100px;
}
</style>
</head>
<body>
<h2>Table Layouts and its working in CSS</h2>
<table id="one">
<caption>Cricketers</caption>
<tr>
<td>ShaneWarne</td>
</tr>
<tr>
<td></td>
<td>Adam</td>
</tr>
<tr>
<td></td>
<td>Shimron Hetmyer</td>
<td></td>
</tr>
</table>
<table>
<caption>Cricketers</caption>
<tr>
<td>ShaneWarne</td>
</tr>
<tr>
<td></td>
<td>Adam</td>
</tr>
<tr>
<td></td>
<td>Shimron Hetmyer</td>
<td></td>
</tr>
</table>
</body>
</html>

出力

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

CSSでのテーブルレイアウトの制御

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   width: 50%;
   box-shadow: inset 0 0 14px orange;
}
td {
   box-shadow: inset 0 0 5px lime;
   white-space: nowrap;
   outline: thin dotted;
}
table {
   border: 3px solid black;
   table-layout: fixed;
   width: 100%;
}
</style>
</head>
<body>
<div>
<table>
<caption>Demo Caption</caption>
<tr>
<td>ABCD</td>
</tr>
<tr>
<td></td>
<td>EFGH</td>
</tr>
<tr>
<td></td>
<td>IJKLM NOPQRST</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>

出力

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

CSSでのテーブルレイアウトの制御


  1. 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

  2. フレックスボックスを使用した高度なCSSレイアウト

    CSS3は、一般にFlexboxと呼ばれるレイアウトモードのFlexibleBoxを提供します。 Flexbox（フレキシブルボックス）はCSS3のレイアウトモードです。このモードを使用すると、複雑なアプリケーションやWebページのレイアウトを簡単に作成できます。コンテナ、フレックスアイテムなどが含まれます。コンテナには次のプロパティがあります- フレックス方向 フレックスラップ フレックスフロー justify-content 整列アイテム align-content 以下は、flexboxを使用した高度なCSSレイアウトのコードです- 例 &l