cssとjavascriptだけを使用して、htmlテーブルを1つの積み重ね列に強制します。

フォームをレイアウトするために使用されるテーブルをラップするhtmlテンプレートを作成しています。私はテーブル自体をではなくテーブルをラップするhtmlを完全に制御しています。テーブルはクライアントに送信される前にテンプレートに挿入されます。私はこれを何も支配していない。私がコントロールできるのは、テーブルとCSSをラップするHTMLだけです。cssとjavascriptだけを使用して、htmlテーブルを1つの積み重ね列に強制します。

テーブルは次のようになります2つの列のテーブルです：

<table> 
    <tr> 
    <td>Column 1</td> 
    <td>Column 2</td> 
    </tr> 
    <tr> 
    <td>this is column 1</td> 
    <td>this is column 2</td> 
    </tr> 
</table> 

------------------------------------------------- 
|Column 1     |Column 2   | 
------------------------------------------------- 
|this is column 1   |this is column 2 | 
-------------------------------------------------

我々は1つの積み重ねられた列として表示することができれば、私は好むだろうが。

---------------------------- 
|Column 1     | 
----------------------------- 
|this is column 1   | 
----------------------------- 
|Column 2     | 
----------------------------- 
| this is column 2   | 
-----------------------------

これを達成する方法は、CSS、JavaScriptを使用しないでください。

出典

2012-09-10 KJF

これまでに試したコードはありますか？ – Kyle

ラッピングhtmlを変更できる場合は、テーブルではなくdivでラップします。これはテーブルを使用するよりもはるかに単純で実用的です。 – easwee

@KJFはeasweeとして、divを使うとテーブルより優れていることを示唆しています。 – freebird

いいえ、これはと合理的にマークアップを変更することなく可能です。 HTMLの表は、の行として構成され、の列としてではありません。

オリジナルオーダー：
Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2

新秩序：私は「ないと言ったのはなぜ
Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2

の例では、あなたが再発注内容だを与えます合理的に "？さて、絶対配置と同様のテクニックでは、一緒に使いたいレイアウトをハックすることができるかもしれませんが、実際のページでそのアプローチがうまくいくとは思っていないので、CSSの傷つきの世界があります。

追加注記：達成するために少し簡単かもしれ何かが順序は同じままこのレイアウト、だろう、「再発注」の問題に追加するには：

---------------------------- |Column 1 | ----------------------------- |Column 2 | ----------------------------- |this is column 1 | ----------------------------- | this is column 2 | -----------------------------

しかし、それは明らかにあなたが望むものではありません。あなたにこれを追加すること

出典

2012-09-10 09:13:43 Jeroen

てみCSS：

td { 
    display: table-row; 
}

乾杯を。

出典

2012-09-10 09:23:47 George

これはクリーンなソリューションですが、IEでは表示されません。 – easwee

それは7以下で動作しません。 :) – George

ノップ - どのIEでも動作しません - さらに9。 – easwee

単純に;いいえ、JavaScriptを使用せずに2列の表を1列の表に切り替えることはできません。
テーブルのコーダーにそのようにテーブルを作成するか、単にJavaScriptを使用してテーブルを再構成するように指示します。

出典

2012-09-10 09:32:31

テーブルを使用していれば、とにかく貧弱なコーディングはもちろんです。 – easwee

display:block;を使用すると、同様の効果を得ることができます。

このフィドルを参照してください：私は考えることができるhttp://jsfiddle.net/R53KH/

出典

2012-09-10 09:43:52 starbeamrainbowlabs

唯一の解決策は、あなたのマークアップを変更する、です。私はそのような方法で1つの列を取り、それをマークアップの行として記述するように変更します。ここに私が作成したフィドルがあります：http://jsfiddle.net/MHsxU/

出典

2012-09-10 09:44:28

まだ問題がありますか？

私のような問題がまだ残っている人には、文書の先頭に<!DOCTYPE html>があることを確認してください。あなたがしない場合は、クロムは、あなたが追加して保持するものを完全に無視しているようですdisplay: table-cell。

出典

2016-02-11 17:17:38 timtom

私は最近、同様の問題に直面していました&は良い解決策を見つけたようです。テーブルはよく誤って使用されるためにひどいラップですが、データのグリッドを可変幅のビューポートに表示する必要がある場合は実際には最もリーンなオプションです。

元の質問に対する回答は、まだで、です。 JavaScriptを使用しないでこの問題を解決するには、はテーブルマークアップを編集できる必要があります。

テーブルが見える...大丈夫です...広げたときに、ひどく震えたときにひどく見えます。「応答性」テーブルは、各セルにコンテキストマークアップを追加することによってのみ可能である（例えば、span.label & span.dataエレメント）。この新しい余計な出力は、デフォルトで&で簡単に非表示にすることができます。応答性表示状態で、thead要素&を隠す

table.responsive td .label { 
 
    display: none; 
 
}

<table class="responsive"> 
 
    <thead> 
 
     <tr> 
 
      <th>Column Foo</th> 
 
      <th>Column Bar</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td><span class="label">Column Foo</span><span class="data">Baz</span></td> 
 
      <td><span class="label">Column Bar</span><span class="data">Qux</span></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

は.label要素を示しています。

table.responsive { 
 
    width: 100%; 
 
} 
 
table.responsive td .label { 
 
    display: none; 
 
} 
 

 
table.responsive th { 
 
    background-color: #ddd; 
 
} 
 

 
table.second { 
 
    margin-top: 5em; 
 
} 
 

 
@media screen and (max-width:640px) { 
 
    table.responsive thead { 
 
    display: none; 
 
    } 
 
    table.responsive tbody th, 
 
    table.responsive tbody td { 
 
    display: block; 
 
    } 
 

 
    table.responsive td span { 
 
    display: block; 
 
    } 
 
    table.responsive td .label { 
 
    background-color: #ddd; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    } 
 
}

私は、より詳細にソリューションをカバーrepoを作成しました。それを確認するにはhereをクリックしてください。

出典

2016-08-27 06:13:35 yesnoio

cssとjavascriptだけを使用して、htmlテーブルを1つの積み重ね列に強制します。

答えて

関連する問題