web-dev-qa-db-ja.com

DIVとCSSはRowspanとColspanとどのように連携しますか？

Divを使用してテーブルセルを作成し、セルをマージする方法について数日間勉強しました。実際にはTABLEでこれを行うことができますが、DIVで同じ画面結果を行うことはできません。誰かが私をより良い方法に導いたり、修正したりできることを願っています。コード。

実は、全画面モードですべてのセルを同じ幅と高さ（結合領域を除く）にしたいのですが、問題は中央の結合セルでした。 TABLEスタイルのように機能させることができない多くのメソッドを試しました。

これが私が望む結果ですが、テーブルで作成します：

<style>
html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
table {
    border-width: 1px 1px 0px 0px;
    border-spacing:0;
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
}
td { 
    border-width: 0px 0px 1px 1px;
}
table, td {
    border-style: solid;
    border-color: purple;
}
.w25 {
    width:25%;
    height:25%;
}
.w50 {
    width:50%;
    height:50%;
}
.w100 {
    width:100%;
    height:100%;
}
</style>
<table class='w100'>
    <tr>
        <td class='w25'>D</td>
        <td class='w25'>E</td>
        <td class='w25'>F</td>
        <td class='w25'>G</td>
    </tr>
    <tr>
        <td class='w25'>C</td>
        <td class='w50' colspan=2 rowspan=2 >MERGED AREA</td>
        <td class='w25'>H</td>
    </tr>
    <tr>
        <td class='w25'>B</td>
        <td class='w25'>I</td>
    </tr>
    <tr>
        <td class='w25'>A</td>
        <td class='w25'>L</td>
        <td class='w25'>K</td>
        <td class='w25'>J</td>
    </tr>
</table>

これは私が現在DIVバージョン用に作成しているコードですが、全画面ですべての幅と高さのバランスを取ることに成功していません。

<style>
html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    border-width: 1px 1px 0px 0px;
}
.intable {
    border-width: 0px 1px 0px 0px;
}
.table, .intable {
    display:table;
    width:100%;
    height:100%;
}
.cell {
    display:table-cell;
}
.row {
    display:table-row;
}
.cell {
    border-width: 0px 0px 1px 1px;
    width:25%;
}
.table, .intable, .cell {
    border-style: solid;
    border-color: purple;
}
</style>
<div class='table'>
    <div class='row'>
        <div class='cell' style="max-width:25%;">D</div>
        <div class='intable'>
            <div class='cell'>E</div>
            <div class='cell'>F</div>
        </div>
        <div class='cell'>G</div>
    </div>
    <div class='row'>
      <div class='intable'>
        <div class='row'>
          <div class='cell'>C</div>
        </div>
        <div class='row'>
          <div class='cell'>B</div>
        </div>
      </div>
      <div class='cell'>Merged Area</div>
      <div class='intable'>
        <div class='row'>
          <div class='cell'>H</div>
        </div>
        <div class='row'>
          <div class='cell'>I</div>
        </div>
      </div>
    </div>
    <div class='row'>
        <div class='cell'>A</div>
        <div class='intable'>
            <div class='cell'>L</div>
            <div class='cell'>K</div>
        </div>
        <div class='cell'>J</div>
    </div>
</div>

テーブルバージョンJSFiddle

DIVバージョンJSFiddle

誰かがコードを修正できることを願っています！

htmlcsshtml-tablecss-tables
6
Andy Cheng

次のように、マージされた列に別のクラスを追加してみてください。

<div class='cell merged'>Merged Area</div>

次のように、マージされた領域のcssを変更します。

.merged{
    width:50%;
    height:50%;
}

私がこれを行った理由は、マージされた領域に同じクラスがあったが、サイズが通常のセルの2倍のスペースを占めるようにしたかったためです。したがって、必要な結果を得るために、マージされた領域の幅と高さを変更するクラスを追加するだけでした。

更新されたフィドルは次のとおりです。

https://jsfiddle.net/6hx2uooz/4/

3
jae.phoenix