« 2010年4月 | トップページ | 2010年7月 »

2010年6月

テーブル 縦列固定

テーブルの縦列固定についてご紹介いたします。

テーブルを二つに分け、スクロールするテーブル、固定するテーブルを作成します。

下 記のようにXHTMLを記述します。

下記のソースでは「.scroll_box」をスクロールする部分、「.row_fix_box」を固 定する部分としています。

<div class="row_fix_area">
    <div class="clear_fix">
        <div class="scroll_box">
            <table width="0" border="0" cellspacing="0" cellpadding="0"
class="scroll" summary="スクロール">
                <col width="25%" />
                <col width="25%" />
                <col width="25%" />
                <col width="25%" />
                <tr>
                    <th abbr="スクロールタイトル1">
                        スクロールタイトル1
                    </th>
                    <th abbr="スクロールタイトル2">
                        スクロールタイトル2
                    </th>
                    <th abbr="スクロールタイトル3">
                        スクロールタイトル3
                    </th>
                    <th abbr="スクロールタイトル4" class="r_none">
                        スクロールタイトル4
                    </th>
                </tr>
                <tr>
                    <td>
                        データ1
                    </td>
                    <td>
                        データ2
                    </td>
                    <td>
                        データ3
                    </td>
                    <td class="r_none">
                        データ4
                    </td>
                </tr>
                <tr>
                    <td>
                        データ5
                    </td>
                    <td>
                        データ6
                    </td>
                    <td>
                        データ7
                    </td>
                    <td class="r_none">
                        データ8
                    </td>
                </tr>
                <tr>
                    <td>
                        データ9
                    </td>
                    <td>
                        データ10
                    </td>
                    <td>
                        データ11
                    </td>
                    <td class="r_none">
                        データ12
                    </td>
                </tr>
                <tr>
                    <td>
                        データ13
                    </td>
                    <td>
                        データ14
                    </td>
                    <td>
                        データ15
                    </td>
                    <td class="r_none">
                        データ16
                    </td>
                </tr>
            </table>
        </div>
        <div class="row_fix_box">
            <table width="0" border="0" cellspacing="0" cellpadding="0" class="row_fix" summary="縦列固定">
                <tr>
                    <th abbr="縦列固定タイトル1" class="r_none">
                        縦列固定タイトル1
                    </th>
                </tr>
                <tr>
                    <td>
                        データ1
                    </td>
                </tr>
                <tr>
                    <td>
                        データ2
                    </td>
                </tr>
                <tr>
                    <td>
                        データ3
                    </td>
                </tr>
                <tr>
                    <td>
                        データ4
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>


cssは以下のようになります。

.row_fix_area {
  width: 400px;
  _width: 401px;
  border: 1px solid #CCC;
}

.clear_fix:after {
  content: "";
  display: block;
  clear: both;
}

.clear_fix {
  overflow: hidden;
  zoom: 1;
}

.scroll_box {
  float: left;
  width: 199px;
  border-right: 1px solid #CCC;
  overflow-x: scroll;
}

table.scroll {
  width: 600px;
}

table.scroll th {
  padding: 5px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  background: #E6E6E6;
}

table.scroll th.r_none,
table.scroll td.r_none {
  border-right: none;
}

table.scroll td {
  padding: 5px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

.row_fix_box {
  float: left;
  width: 200px;
}

table.row_fix {
  width: 200px;
}

table.row_fix th {
  padding: 5px;
  border-bottom: 1px solid #CCC;
  background: #E6E6E6;
}

table.row_fix td {
  padding: 5px;
  border-bottom: 1px solid #CCC;
}

「.row_fix_area」で全体の幅とボーダー線を記述します。「<?xml version="1.0" encoding="utf-8"?>」のXML宣言をしている場合では、IE6の表示モードは変わるので「_width: 401px;」のCSSハックを使用しIE6のみの調整などを行います。

「.clear_fix」は「.scroll_box」と 「row_fix_box」が「float」するので使用しておきます。

「.scroll_box」は「width: 199px;」の幅を内要素が越えた場合に、「overflow-x: scroll;」で横スクロールの表示をさせます。

「table.scroll」 は「.scroll_box」の「width: 199px;」の横幅を越える「width: 600px;」を指定します。この場合、横スクロールが表示されます。また、「table.scroll」の各セルの幅は表の縦列の属性をまとめて指定す る「<col>」で決定しています。

「table.scroll th」はパディングやボーダー線、背景色を指定しています。「table.scroll th.r_none」と「table.scroll td.r_none」でthとtdの右横のボーダー線を消去します。「table.scroll td」はパディングとボーダー線を指定しています。

「.row_fix_box」 は固定する側のボックスです。フロート、幅200pxを指定しています。

「table.row_fix」は固定する側のボックス内にある テーブルで「.row_fix_box」と同じ幅の200pxを指定します。「table.row_fix th」はパディングとボーダー線、背景色を指定してます。「table.row_fix td」はパディングとボーダー線を指定しています。

テーブル 縦列固定

Table02



| | コメント (0) | トラックバック (0)

テーブル ヘッダー固定

テーブルのヘッダー固定についてご紹介いたします。

テーブルのヘッダー固定にはテーブルのtbodyを使用したものや、 javascriptを使用したものなどいくつかありますがここではテーブルを二つに分けてヘッダーを固定する方法を記載します。

下記のよ うにXHTMLを記述します。

下記のソースでは「table.header」を固定するヘッダー部分、「.data_box」をスクロール するデータ部分としています。

<div class="data_area">
    <table width="0" border="0" cellspacing="0" cellpadding="0"
class="header" summary="テーブルヘッダー">
        <col width="25%" />
        <col width="25%" />
        <col width="25%" />
        <col width="25%" />
        <tr>
            <th abbr="ヘッダータイトル1">
                タイトル1
            </th>
            <th abbr="ヘッダータイトル2">
                タイトル2
            </th>
            <th abbr="ヘッダータイトル3">
                タイトル3
            </th>
            <th abbr="ヘッダータイトル4" class="r_none">
                タイトル4
            </th>
        </tr>
    </table>
    <div class="data_box">
        <div class="data_space">
            <table width="0" border="0" cellspacing="0" cellpadding="0"
class="data" summary="テーブルデータ">
                <col width="25%" />
                <col width="25%" />
                <col width="25%" />
                <col width="25%" />
                <tr>
                    <td>
                        データ1
                    </td>
                    <td>
                        データ2
                    </td>
                    <td>
                        データ3
                    </td>
                    <td>
                        データ4
                    </td>
                </tr>
                <tr>
                    <td>
                        データ6
                    </td>
                    <td>
                        データ7
                    </td>
                    <td>
                        データ8
                    </td>
                    <td>
                        データ9
                    </td>
                </tr>
                <tr>
                    <td>
                        データ10
                    </td>
                    <td>
                        データ11
                    </td>
                    <td>
                        データ12
                    </td>
                    <td>
                        データ13
                    </td>
                </tr>
                <tr>
                    <td>
                        データ14
                    </td>
                    <td>
                        データ15
                    </td>
                    <td>
                        データ16
                    </td>
                    <td>
                        データ17
                    </td>
                </tr>
                <tr>
                    <td>
                        データ18
                    </td>
                    <td>
                        データ19
                    </td>
                    <td>
                        データ20
                    </td>
                    <td>
                        データ21
                    </td>
                </tr>
                <tr>
                    <td>
                        データ22
                    </td>
                    <td>
                        データ23
                    </td>
                    <td>
                        データ24
                    </td>
                    <td>
                        データ25
                    </td>
                </tr>
                <tr>
                    <td>
                        データ26
                    </td>
                    <td>
                        データ27
                    </td>
                    <td>
                        データ28
                    </td>
                    <td>
                        データ29
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>


cssは以下のようになります。

.data_area {
  width: 400px;
  border-top: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-left: 1px solid #CCC;
}

table.header {
  width: 400px;
}

table.header th {
  padding: 5px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  background: #E6E6E6;
}

table.header th.r_none {
  border-right: none;
}

.data_box {
  width: 400px;
  height: 200px;
  overflow: hidden;
  border-bottom: 1px solid #CCC;
  overflow-y: scroll;
}

.data_space {
  padding: 0 0 10px 0;
}

table.data {
  width: 400px;
}

table.data td {
  padding: 5px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

「.data_area」で全体の幅とボーダー線を記述します。

「table.header」ではテーブルの幅を明確にし、 「table.header th」では、パディング、ボーダー線、そして背景色を指定しています。「table.header th.r_none」は最も右横のthの右横の線を消去しています。これを指定しない場合、「.data_area」の「border-right: 1px solid #CCC;」とプロパティが被り、最も右横のthの線だけが二重になったように見えます。

「.data_box」では 幅、高さを指定し、「overflow: hidden;」と「overflow-y: scroll;」で「height: 200px;」を越える内要素が「.data_box」内に存在した場合、スクロールバーが出現します。

「.data_space」の「 padding: 0 0 10px 0;」は「table.data」の最後のtd要素の「border-bottom: 1px solid #CCC;」と「.data_box」の「border-bottom: 1px solid #CCC;」との線の重なりを回避するために指定しています。

「table.data」はデータ部分のパディングや、ボーダー線などの装飾 をしています。

「table.header」と、「table.data」の各セルの幅は表の縦列の属性をまとめて指定する 「<col>」で決定しています。

テーブル ヘッダー固定

Table_2


| | コメント (0) | トラックバック (0)

IE8 max-height 横スクロールバー

とある案件で、max-heightを使用してIE8ではまった。
というのもmax-heightをかけている、プロパティでoverflow-y: scroll;として
横スクロールバーを出すようにしていると、「max-height」ではなく、「height」の動きをしてしまうというおそろしい現象が起こる。
「max-height」で内要素がある分だけの高さをとりつつ、それでいて最大の高さは決められているという「max-height」がどんな時でも最大の高さ、つまり通常の「height」の動きをしてしまう。
回避するには「max-height」と「overflow-y: scroll;」などの横スクロールバーが出るプロパティを一つのクラスなどに記述せず、別々のクラスにそれぞれ記述すればいい。

「max-height」と「overflow-y: scroll;」を一緒に記述しても、問題ない回避方法ありませんかねえ。

| | コメント (0) | トラックバック (0)

« 2010年4月 | トップページ | 2010年7月 »