Le tableau de la grille à l'aide de Div en HTML et CSS

Je veux créer un tableau de grille à l'aide de DIV (HTML & CSS). J'ai failli en et avez encore quelques questions. J'ai joint l'image de l'échantillon. Je veux que la grille doit être le même que cette image de l'échantillon. J'ai attaché les violon de ce que j'ai créé jusqu'à présent. Pourriez-vous aider quelqu'un qui ce fais et comment puis-je améliorer pour finir le tableau en tant que mêmes que l'image?

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;
}

image de l'échantillon

Le tableau de la grille à l'aide de Div en HTML et CSS

"Je veux créer un tableau de grille à l'aide de DIV" - pourquoi? Vous devriez être en utilisant un TABLEAU.
"J'aime avoir la première et la dernière colonne de la largeur serait plus que le milieu de la div". Wuuut?
Salut, c'est mon travail de les terminer pour créer une grille de table par l'utilisation de div.
Désolé, ajouté à la ligne. Désolé. J'ai édité
C'est des données tabulaires et, par conséquent, devrait être l'une des fois où vous devriez être en utilisant les tables!

OriginalL'auteur Sri | 2013-01-10

  1. 3

    Ajouter display:table-row à la ligne div-je.e .rowDivHeader & .rowDiv

    & display:table à la div principale .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
    }

    DÉMO

    Salut sowmya, Si j'en utilisant la méthode du formulaire avec votre css, la tête est bien, mais toutes les colonnes à afficher dans la première colonne(Recommandation) et les autres colonnes sont vides.
    Sérieusement ne pas avoir votre point. jsfiddle.net/Hv3V4/5 cochez cette. est-ce cela que tu veux?
    salut, désolé. Votre code fonctionne très bien et j'ai mis en place mon projet. Quand je reçois ce tableau à l'intérieur de la forme en ruby on rails, toutes les colonnes sont placées dans la première colonne et les autres colonnes sont vides.
    Juste un coup d'oeil.. jsfiddle.net/Hv3V4/4 Merci
    ya son bon droit?? wat u d'autre besoin?

    OriginalL'auteur Sowmya