4

DIV を使用してテーブル グリッドを作成したい (HTML と CSS のみ)。私はほとんど入りましたが、まだいくつかの問題があります。サンプル画像を添付しました。このサンプル画像のようにグリッドを同じにする必要があります。これまでに作成したもののフィドルを添付しました。誰かが何をしているのか、どうすればテーブルを画像と同じように仕上げることができるか教えていただけますか?

HTML:

<div class="containerDiv">

  <div class="rowDivHeader">
    <div class="cellDivHeader">Recommendation</div>
    <div class="cellDivHeader">Typical savings</div>
    <div class="cellDivHeader">Improved SAP</div>
    <div class="cellDivHeader">Improved EI</div>
    <div class="cellDivHeader">Indicative cost</div>
    <div class="cellDivHeader">Include</div>
    <div class="cellDivHeader lastCell">Removal Reason</div>
  </div>

  <div class="rowDiv">
    <div class="cellDiv">Room-in-roof-insulation</div>
    <div class="cellDiv">93.0</div>
    <div class="cellDiv">F : 29</div>
    <div class="cellDiv">B : 89</div>
    <div class="cellDiv">£1,500 - £2,700</div>
    <div class="cellDiv">Checkbox</div>
    <div class="cellDiv lastCell">Textbox</div>
  </div>
</div>

CSS:

.containerDiv {
  border: 1px solid #3697f6;
  width: 100%;
}

.rowDivHeader {
  border: 1px solid #668db6;
  background-color: #336799;
  color: white;
  font-weight: bold;
}

.rowDiv {
  border: 1px solid #668db6;
  background-color: #cee6fe;
}

.cellDivHeader {
  border-right: 1px solid white;
  display: table-cell;
  width:12%;
  padding: 1px;
  text-align: center;
}

.cellDiv {
  border-right: 2px solid white;
  display: table-cell;
  width:10%;
  padding-right: 4px;
  text-align: center;
  border-bottom: none;
}

.lastCell {
  border-right: none;
}

サンプル画像

サンプル テーブル グリッド イメージ

4

1 に答える 1

3

display:table-row行divに追加します。.rowDivHeader & .rowDiv

＆display:tableメインdivへ.containerDiv

.containerDiv {
  border: 1px solid #3697f6;
  width: 100%; display:table
}    
.rowDivHeader {
      border: 1px solid #668db6;
      background-color: #336799;
      color: white;
      font-weight: bold; display:table-row
    }
    .rowDiv {
      border: 1px solid #668db6;
      background-color: #cee6fe;
      display:table-row
    }

デモ

于 2013-01-10T10:29:19.587 に答える