0

div を使用して次のようなテーブルと同じ結果を達成したいので、応答性を高め、各テーブル行の列数を調整できます。(たとえば、最初の行には 3 つのレスポンシブ列があり、2 行目には 4 つのレスポンシブ列があります)。私はまた、別のtrに単一の単語を書くことを避けたい

それを行う方法はありますか？

ここに現在のテーブルがあります

<table>
    <thead>
        <tr>
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="long-column">Long Column</th> <!-- th sets the width -->
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="gray">Long Column</td> <!-- td inherits th width -->
        </tr>
    </tbody>
</table>


table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }

.short-column { background: yellow; width: 30%; }
.long-column { background: lime; width: 40%; }

.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }

ここにフィドルがあります

のようなものを使用することは可能ですか

<table width="100%" border="0" cellspacing="0" cellpadding="4">
          <tr>
         <td>
                 <!--<div>THREE COLUMNS</div>-->
             </td>
         </tr>  
          <tr>
         <td>
                 <!--<div>FOUR COLUMNS?</div>-->
             </td>
         </tr>  
</table>
4

1 に答える 1

2

フローティング div を td 要素に挿入すると、同じレイアウトを作成できます。

<table width="100%" border="1" cellspacing="0" cellpadding="4">
    <tr>
        <td>
            <!--<div>THREE COLUMNS</div>-->
            <div class="three"></div>
            <div class="three"></div>
            <div class="half"></div>
        </td>
    </tr>
    <tr>
        <td>
            <!--<div>FOUR COLUMNS?</div>-->
            <div class="four"></div>
            <div class="four"></div>
            <div class="four"></div>
            <div class="four"></div>
        </td>
    </tr>
</table>

次に、幅にいくつかのスタイルを追加するだけで、準備完了です!

デモ: http://jsfiddle.net/TdmkG/1/

于 2013-07-18T17:32:51.020 に答える