テーブルの代わりに.divのコンテナを使用したいのですが、どのようにすればいいですか？

-4

私のコード：https://jsfiddle.net/5L3ayxrs/3/テーブルの代わりに.divのコンテナを使用したいのですが、どのようにすればいいですか？

誰かがテーブルを取り出してdivタグで置き換える方法を教えてもらえますか？私は検索してきており、私が試したことは何も働いていません。大変に感謝します。前もって感謝します。

誰かが私のコードを.divのコンテナで表示することはできますか？私はこれで数時間でしたし、動作させることができません。

<table align='center'> 
    <tr> 
    <td valign='middle'> 
     <table> 
     <tr> 
      <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'> 
      Radio 1 
      <br> 
      <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span> 
      </td> 
      <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'> 
      Radio 2 
      <br> 
      <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span> 
      </td> 
      <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'> 
      Radio 3 
      <br> 
      <span style='display:block; width: 300px; height: 24px;background-color:#E2AB58'></span> 
      </td> 
     </tr> 
     <tr> 
      <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'> 
      Radio 4 
      <br> 
      <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span> 
      </td> 
      <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'> 
      Radio 5 
      <br> 
      <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span> 
      </td> 
      <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'> 
      Radio 6 
      <br> 
      <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span> 
      </td> 
     </tr> 
     <tr> 
      <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'> 
      Radio 7 
      <br> 
      <span style='display:block; width: 300px; height: 24px; background-color:#E2AB58'></span> 
      </td> 
      <td style='color:#0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'> 
      Radio 8 
      <br> 
      <span style='display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'></span> 
      </td> 
      <td style='color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'> 
      Radio 9 
      <br> 
      <span style='display:block; width: 300px; height: 24px;background-color:#E2AB58'></span> 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table>

出典

2016-06-24 coding4532

申し訳ありません、あなたの質問は完全に不明です。明らかに、もしあなたが 'div'コンテナによって実装したテーブルを置き換えたいなら、_ soはそうします。だからあなたの_real_質問はここにありますか？ – arkascha

それは、divのコンテナです、私はそれを行うのに役立つ必要があります。 – coding4532

あなたが望むのは、_divs_のすべての「/

」を置き換えることだけです。なぜあなたはただ好きではないのですか？_replace_ the _names_？ –

答えて

レイアウトをdivに変更するが、動作を維持するにはdisplay:tableを使用する必要があります。だから、あなただけ<div class="table">で<table>タグを交換し、あなたのCSSのクラスを追加します。<tr>ため

.table{ 
    display: table; 
}

と同じことを、<td>など

出典

2016-06-24 07:53:08

これを行うと、交換のポイントは何ですか？ – arkascha

テーブルはデータを表示するためのものです。レイアウトを作成したいだけなら、htmlタグよりも 'display：table'を使うのが良いでしょう。 –

私は同意しません。これは、divコンテナのテーブルの動作をエミュレートしようとするので、悪い習慣です。それには意味がありません。そしてそれは反応のよいレイアウトを破ります。 – arkascha

https://jsfiddle.net/b7pmxmhh/を、そうであっても...あなたは割合を見たいと思うかもしれまたは実際のピクセルに変更することもできます。

<style> 
.col { width: 40%; float: left; color: #0059dd;line-height:1;font-size:30px;font-weight:bold;padding: padding-top: 0px; padding-bottom: 100px; padding-right: 10%; } 
.col span {display:block; width: 300px; height: 24px; background-color:#E2AB58;} 
</style> 
<div class="col"> 
    Radio 1 
    <span></span> 
</div> 
<div class="col"> 
    Radio 2 
    <span></span> 
</div> 
<div class="col"> 
    Radio 4 
    <span></span> 
</div> 
<div class="col"> 
    Radio 5 
    <span></span> 
</div> 
<div class="col"> 
    Radio 7 
    <span></span> 
</div> 
<div class="col"> 
    Radio 8 
    <span></span> 
</div>

出典

2016-06-24 07:54:52 Alex

テーブルの代わりに.divのコンテナを使用したいのですが、どのようにすればいいですか？

答えて

関連する問題