1

私はこのフォーラム レイアウトを設計しており、フォーラム テーブルを描画するための優れたデザインを考え出していますが、これが HTML/CSS で簡単に実行できるかどうかはわかりません。

レイアウト全体の描画を続ける前に、これが達成可能かどうかを知る必要があります。そうでない場合は、この効果を捨てて物事を再考する必要があります...

たとえば、私が現在持っているデザインは次のとおりです。

サンプルテーブル

この例の行はすべて同じ高さですが、これは単なる例です。実際のテーブルは実際には行の高さが異なるため、コードはそれを考慮する必要があります...

これはどのように行うことができますか？

4

3 に答える 3

4

テーブルのサイズが大きくなるにつれてグラデーションを垂直方向にスケーリングする必要がなければ、CSS はそのようなことを非常に簡単に行うことができます。以下は、上で示した効果を得るために使用できる例です。

更新:どういうわけかベベルが見えませんでした (夜が遅すぎて視界がぼやけすぎたせいだと思います)。それらを実際に見るにはズームインする必要がありましたが、それに合うようにソリューションを更新しました。このソリューションを機能させるには、追加の「div」タグを追加する必要がありますが、可能ですが、画像が示す範囲では機能しないと思います. それはかなりまともに動作します。<div />以下に、余分なタグを不要にする jQuery スクリプトをいくつか示します。

マークアップには、次のようなものを使用します。

<table cellspacing="0">
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
</table>

スタイルシートでは、次のようなものを使用します。

td {
    border: 1px solid #777;
}

.bevel {
    background: url('img.png') top left repeat-x;
    margin: -1px;
    border-top: 1px solid #fbfbfb;
    border-left: 1px solid #fbfbfb;
    border-right: 1px solid #bfbfbf;
    border-bottom: 1px solid #e8e8e8;
}

.side {
    width: 30px;
}

.main {
    width: 170px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

画像の幅は 1px にします。セルの幅に合わせて繰り返します。グラデーションを垂直に伸ばしたい場合は、運が悪いです。CSS は画像を拡大縮小できず、繰り返すだけです。垂直方向にスケーリングされた背景画像を作成するには、悪夢のようなマークアップを作成するか、それを機能させる何らかの JavaScript が必要です。

タグ スープをなくすには、<div />jQuery を使用してタグを挿入し、ソースがごちゃごちゃにならないようにします。outerBevel代わりに ' ' クラスをタグに追加し、<td />この jQuery スクリプトを呼び出すだけです (jQuery を使用している場合。他の JavaScript API でも同様のことができると確信しています)。 

$('.outerBevel').wrapInner('<div class="bevel"></div>');
于 2009-01-11T05:18:28.837 に答える
1

レイアウトに関しては、標準の HTMLtableタグがすべてを行い、適切な用途でもあります。

目的の境界効果を得るには、ここでさまざまな CSS 境界オプションを見てください: http://www.w3schools.com/css/css_reference.asp#border

于 2009-01-11T05:10:34.937 に答える
0

あなたはおそらく次のようなことをしたいと思うでしょう:

table#mytable td {
  border-style: inset;
  border-width: 3px; /* or whatever width you want */
}
于 2009-01-11T05:29:36.600 に答える