サイト内検索
...スタイルシート(css)...
スタイルシート・table
tableのサイズ
サイズの横幅は、widthプロパティを指定します。
サイズの高さは、heightプロパティを指定します。
サイズの高さは、heightプロパティを指定します。
- [使い方]
- table{
border: 1px #000000 solid;
width: 100px;
height: 100px; }
プロパティ名 | 値 | 説明 |
---|---|---|
width: | ; | セルの横幅を指定します。
「数値+単位」(例・・100px)を指定します。 単位は、「px」・「em」など、または「%」を指定します。 |
auto; | 初期値(内容により自動調整) | |
height: | ; |
セルの高さを指定します。
単位は、「px」・「em」など、または「%」を指定します。 単位は、「px」または「%」を指定します。 |
auto; | 初期値(内容により自動調整) |
最大・最小サイズ
- tableのサイズ
- 横幅の最大値は、max-widthプロパティを指定します。
- 横幅の最小値は 、min-widthプロパティを指定します。
- 高さの最大値はは、max-heightプロパティを指定します。
- 高さの最小値は、min-heightプロパティを指定します。
- [使い方(width)]
- table1{
width: 100%;
max-width: 400px;
min-width: 220px;
background-color: #ccff99;
}
- [使い方(height)]
- table2{
height: 100%;
max-height: 500px;
min-height: 220px;
background-color: #ccff99;
}
width (横幅) | ||
---|---|---|
プロパティ名 | 値 | 説明 |
max-width: | ; | 最大の幅を指定します。
「数値+単位」(例・・100px)を指定します。 単位は、「px」または「%」を指定します。 |
min-width: | ; | 最小の幅を指定します。
「数値+単位」(例・・100px)を指定します。 単位は、「px」または「%」を指定します。 |
none; | 制限なし
sample(max-width : none;) |
height(高さ) | ||
---|---|---|
プロパティ | 値 | 説明 |
max-height: | ; | 最大の高さを指定します。 「100px」のように「数値+単位」を指定します。 単位はpx」または「%」を指定します。 |
min-height: | ; | 最小の高さを指定します。 「100px」のように「数値+単位」を指定します。 単位はpx」または「%」を指定します。 |
none; | 制限なし・・・sample(max-height: none;) |
サンプル
[headの中]
<style type="text/css"><!--
table,td,th{
border: 1px #999999 solid;
width: 180px;
height: 50px;
}
td,th{
border: 1px #999999 solid;
}
-->
</style>
[bodyの中]
<table><tr>
<th>No1</th>
<th>No2</th>
</tr>
<tr>
<td> No3</td>
<td> No4</td>
</tr>
</table>
[ブラウザ上]
No1 | No2 |
---|---|
No3 | No4 |