html - 行スパンのないブロックのようなセルを表示する

Question

http://jsbin.com/uzojax/2/edit

上記は私のjsbinで、rowspan属性なしで、セルのhtmlテーブル構造を乱すことなく、セル8をブロックで表示する必要があります。

Answer 1

次に示すように、セルをブロックまたはインライン ブロックとして表示できます。

http://jsfiddle.net/dCgzh/1/

position: relative を使用できますが、セルはテーブル内の位置に対して相対的に配置されます。これにより、セルは周囲のセルのプロパティを「認識」しないため、位置と幅の設定が少し難しくなります。

position: absolute (フィドルのように) を使用する場合、ポジショニングは本体、またはポジショニング自体を持つコンテナー要素に対して相対的になります。その方法で、セルをテーブルの左側に配置できます。フィドルでは、テーブルには「位置：相対」があります。テーブルの左側にセルを配置し、テーブルと同じ幅 (100%) にすることができます。

  .csstdred {
    display: block;
    /*display: inline-block;*/
    position: relative;
    width: 200px;
  }

行スパンに相当する CSS はありませんが、これは理にかなっています。テーブルは表形式のデータ用です。したがって、テーブルはページ構造の不可欠な部分です。したがって、rowspan などの属性は単なるスタイリングとは見なされないため、CSS スタイリングの代わりに別個の HTML 属性として使用できます。