wiki:pne-xhtmlcss/parts/2
 ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Version 3 (modified by kiwa, 14 years ago) (diff)

【XHTMLCSS化】2. table3x（9面パズル）ページ修正

TOC

2. table3x（9面パズル）

パーツリストに戻る

表示例

source:OpenPNE/branches/prj/xhtmlcss/parts/capture/2.png

ソース

html

<div class="section table3x">
<table><tr>
<th class="heading" colspan="3">（ここにパネル名を記載）</th>
</tr>

<!-- ↓必要な段分繰り返す-->
<tr>
<td>
<p class="photo">（写真表示領域）</p>
<p class="text">（名前）</p>
</td>
<td>
<p class="photo">（写真表示領域）</p>
<p class="text">（名前）</p>
</td>
<td>
<p class="photo">（写真表示領域）</p>
<p class="text">（名前）</p>
</td>
</tr>
<!--↑必要な段分繰り返す-->

<td class="footer" colspan="3">
<ul class="moreInfo">
<li>（「もっと見る」など）</li>
</ul>
</td>
</tr></table>
</div>

template

CSS

【style.css】 

/*==============================================================================
 * フレンドリストなどの 9面(3xN)テーブル(.table3x) に対する指定
 *----------------------------------------------------------------------------*/
.table3x {
        margin-top: 6px; /* これはパーツ共通のマージンなのでセレクタを変えるかもしれません */
}
.table3x table {
        width: 100%;
        border: 2px solid #cccccc;
}
.table3x td {
        border: 1px solid #cccccc;
        vertical-align: top;
}
.table3x p {
        text-align: center;
}
.table3x p.photo {
        height: 76px;
        padding: 2px;
        border-bottom: 1px solid #cccccc;
}
.table3x p.text {
        margin: 2px;
        overflow: auto;
}

関連情報