HTML表セルをCSSで再配置できますか？

CSSだけを使ってHTML表のセルを並べ替えることができるのだろうかと思います。おそらくHTML表セルをCSSで再配置できますか？

------------------------------------------------ 
| C |    A   | B | 
------------------------------------------------

かさえ、この：例：

がこの

------------------------------------------------ 
|    A   | B | C | 
------------------------------------------------

は次のように表示することができ

------------------------- 
|   A   | 
------------------------- 
|  B  |  C  | 
-------------------------

のみCSSでこれは可能ですか、それは修正する必要がありますHTMLノード？

編集：私は、ユーザーによって報告された問題の一覧を表示したい

：これがすべてでは必要とされているなぜあなたのいくつかは疑問に思ったは、ので、ここで現実の私が直面してる問題だ

------------------------------------------------------------------------------ 
| Problem description (A) | Reporting user (B) | Link to affected entity (C) | 
------------------------------------------------------------------------------

さまざまなレイアウトを評価したいと思っていました。第1のレイアウトの変形は報告ユーザを強調し、第2のレイアウトはテキスト記述を強調する。

構造の変更には何の問題もなく、実際にはすでに行っていますが、これをコーディングしていたときにCSSでできるかどうかは疑問でした。（ちょうど純粋な好奇心）

出典

2011-09-10 Daniel Rikowski

最近のブラウザでのみ動作するものは受け入れられますか？ – thirtydot

具体的には、 '

'要素の使用のように、表のセルを特に参照しているのですか、テーブルレスな表のようなデザインについて話していますか？あなたが求めているのは、テーブルレス設計ではそれほど難しいことではありません。 – Wex

CSSでこれをやっているのはなぜですか？表の意味/構造を変更する場合は、HTMLを変更します。 – BoltClock

答えて

でも可能ですが、これは最善のことではありません（他の回答を参照）。ここ
は私の例です：

*{margin:0; padding:0} 
 
.type-a .b {width: 50%; float:left;} 
 
.type-a .a {width:100%; float:left;} 
 
.type-a .c {width: 50%; float:left;} 
 

 
.type-b .b {width: 25%; float:left;} 
 
.type-b .a {width: 50%; float:right;} 
 
.type-b .c {width: 25%; float:left;}

<table class="type-a" width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
</table> 
 

 
<br /> 
 
<br /> 
 
<table class="type-b" width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
</table>

View on JSFiddle

出典

2011-09-10 17:07:42

技術的には、 'float：left | 'display：table-cell'の要素に対しては、テーブルレイアウト管理から完全に削除しています。たとえば、行内のセルを同じ高さにしたい場合、アプローチは機能しません。参照：http://jsfiddle.net/ye8Qa/1/ –

@ c-smile、100％正しい。私はこれが最善のことではないと述べ、あなたのコメントは別の理由です。その質問は、おそらく暗示されていたとしても、テーブルレイアウト管理を遵守しなければならないと述べていませんでした。 –

CSSの現時点でそのような機能はありません。

CSS3はflexbox modelを1つの形式または別の形式で提供します（現時点ではW3Cでの作業中です）。それはあなたが望むことをすることができるはずです。

出典

2011-09-10 17:06:58

あなたが汚い方法でそれを行うことができます、あなたは常にフロート機能を使用しようとすることができます。

いますが、一例として提供最後の設計のために、私は（一番上の幅でなければなりません：100％;および他の2が50％であるべきである）あなたは幅と遊ぶことができるはずだと思う

出典

2011-09-10 17:27:47 ahoura

あなたは追加されていますが、適切なマークアップとcssのタッチで3つすべてを行うことができます。 http://jsfiddle.net/jalbertbowdenii/xvBhF/

公正な警告：このようなテーブルデータをどのように扱うことができるのかよく分かりませんが、私は言いたいのですが、関係なく、公開している場合は、それ。私はテーブルスタイルで来るすべてのhtml属性の味の方法があると確信しています。

出典

2011-09-11 06:32:32 albert

HTML表セルをCSSで再配置できますか？

答えて

関連する問題