7

タスクはかなり奇妙です。HTML テーブルを作成する必要がありますが、従来のタグを使用することはできません<table>。私のテーブルは次のようになります。ここに画像の説明を入力

以下のようにすると簡単です。

<table>
     <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
     </tr>
     <tr>
         <td colspan="5"></td>
     </tr>
     ...

ただし、前述のとおり、従来のテーブル タグ ( table、tr、 )は使用できません。これが私が現在持っているもののJSFIddleです。div と CSS のみを使用して、同じ結果を得るにはどうすればよいですか。tdth<td colspan="5"></td>

編集:
* 1 行のテーブル セルの幅は固定してはいけません。動的にする必要があり、それら (セル) を (1 行で) 異なる幅にすることができる必要があります。
*同じ列の異なる行のテーブル セルの幅は等しくなければなりません。従来のテーブルのように。「colspanned」セルの幅のみが異なる必要があります。

4

6 に答える 6

4

CSS 2.1仕様の一部「17.5 テーブル コンテンツのビジュアル レイアウト」に記載されているとおり

セルは複数の行または列にまたがることがあります。(CSS 2.1 では、スパンされた行または列の数がどのように決定されるかは定義されていませんが ...

ですから、答えは簡単です！CSSテーブルを HTMLテーブルとまったく同じと考えないでください。「17.2.1匿名テーブルオブジェクト」で述べたようないくつかの違いがあるため:

...テーブルモデルが機能するためには、「欠落している」要素を想定する必要があります。テーブル要素は、「table」/「inline-table」要素、「table-row」要素、および「table-cell」要素に対応する少なくとも 3 つのネストされたオブジェクトで構成される、必要な匿名テーブル オブジェクトをそれ自体の周りに自動的に生成します。 . ...

したがって、スパンされた行または列の数を定義する方法を指定するまで、この方法でそれを行うことができます (各行をテーブルとして、不要な div ブロックを避けるためにテーブル行を削除します)。

CSS

.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
    width: 16.67%;
}
.wideCell {
    display: table-cell;
}

HTML

<div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell">Four</div>
    <div class="cell">Five</div>
    <div class="wideCell">Six</div>
</div>
<div>One Two Three Four Five Six</div>
<div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell">Four</div>
    <div class="cell">Five</div>
    <div class="wideCell">Six</div>
</div>
于 2013-07-18T11:04:56.210 に答える
1

CSSを使用して、探しているテーブルのような効果を得る必要がありfloatますwidth。基本的にはdivs、幅とクラス名が固定された5つをすべて配置し、それらを左側にフローティングします。はwideCell同じwidthものを持っており、.wrapperそれらをすべてまとめて素敵なブロックにまとめています。

HTML

<div class="wrapper">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="wideCell"></div>
</div>

CSS

.wrapper {
    width:510px;
}
.cell {
    width:100px;
    height:50px;
    background-color:#ff0000;
    float:left;
    border:1px #000 solid;
}
.wideCell {
    width:508px;
    height:50px;
    background-color:#ff0000;
    float:left;
    border:1px #000 solid;
}

デモ

于 2013-03-19T10:24:37.080 に答える
1

編集

CSS

.table{
        width: 100%;
    }
    .table .row{
        width: 100%;
        height: 25px;
        margin: 0px;
        padding: 0px;
    }
    .table .row .cell{
        width: 150px;
        float: left;
        border: solid 1px #CCC;
        height: 25px;
    }
    .table .clear_float{
        clear: both;
    }
    .table .row .cell.rowspan{
        width: 759px;
        border: solid 1px #CCC;
    }

html

<div class="table">
    <div class="row">
        <div class="cell">One</div>
        <div class="cell">Two</div>
        <div class="cell">Three</div>
        <div class="cell">Four</div>
        <div class="cell">Five</div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell">One</div>
        <div class="cell">Two</div>
        <div class="cell">Three</div>
        <div class="cell">Four</div>
        <div class="cell">Five</div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell">One</div>
        <div class="cell">Two</div>
        <div class="cell">Three</div>
        <div class="cell">Four</div>
        <div class="cell">Five</div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
</div>
于 2013-03-19T10:20:18.127 に答える
0

これを行うことができます ( data-x には適切な display:xxxx セットがあります):

<!-- TH -->
<div data-tr>
    <div data-th style="width:25%">TH</div>
    <div data-th style="width:50%">

         <div data-table style="width:100%">
             <div data-tr>
                 <div data-th style="width:25%">TH</div>
                 <div data-th style="width:25%">TH</div>
                 <div data-th style="width:25%">TH</div>
                 <div data-th style="width:25%">TH</div>
             </div>
         </div>

    </div>
    <div data-th style="width:25%">TH</div>
</div>


<!-- TD -->
<div data-tr>
    <div data-td style="width:25%">TD</div>
    <div data-th style="width:50%">

         <div data-table style="width:100%">
             <div data-tr>
                 <div data-td style="width:25%">TD</div>
                 <div data-td style="width:25%">TD</div>
                 <div data-td style="width:25%">TD</div>
                 <div data-td style="width:25%">TD</div>
             </div>
             <div data-tr>
                 ...
             </div>
         </div>

    </div>
    <div data-td style="width:25%">TD</div>
</div>
于 2014-08-13T23:54:22.207 に答える
0

私はたくさん検索しましたが、display:table CSS に colspan のようなものはありません。これを試すことができます: CSS display:table

 <div style="display:table;">
     <div style="display:table-row;">
         <span style="display:table-cell;">Name</span>
         <span style="display:table-cell;"><input type="text"/></span>
     </div>
     <div style="display:table-row;">
         <span style="display:table-cell;">E-Mail</span>
         <span style="display:table-cell;"><input type="text"/></span>
     </div>
     <div style="display:table-row;">
         <span style="display:table-cell;">Password</span>
         <span style="display:table-cell;"><input type="text"/></span>
     </div>
 </div>

 <div style="display:table;">
     <div style="display:table-row; " >
         <span style="display:table-cell;">
             <button>Send Message</button>
         </span>
     </div>                            
  </div>
于 2013-10-02T14:24:21.140 に答える