如何組織div看起來像一張桌子？

我有多個輸入字段形式，我想組織它們是這樣的：如何組織div看起來像一張桌子？

https://jsfiddle.net/dmilos89/58ea82gj/2/

佈局上面使用的表結構。我從佈局創建，以上所有這些我需要創建使用div。這是我到目前爲止：

<div class="formItem"> 
    <div class="frRow"> 
     <div class="frCell"> 
      <span>Results</span> 
     </div> 
    </div> 
    <div class="frRow"> 
     <div class="frCell"> 
      <span>Ear</span> 
     </div> 
     <div class="frCell"> 
      <span>250</span> 
     </div> 
     <div class="frCell"> 
      <span>500</span> 
     </div> 
     <div class="frCell"> 
      <span>750</span> 
     </div> 
     <div class="frCell"> 
      <span>1000</span> 
     </div> 
     <div class="frCell"> 
      <span>1500</span> 
     </div> 
     <div class="frCell"> 
      <span>2000</span> 
     </div> 
     <div class="frCell"> 
      <span>3000</span> 
     </div> 
     <div class="frCell"> 
      <span>4000</span> 
     </div> 
     <div class="frCell"> 
      <span>6000</span> 
     </div> 
     <div class="frCell"> 
      <span>8000</span> 
     </div> 
    </div> 
    <div class="frRow"> 
     <div class="frCell"> 
      <span>SRT<br>SAT</span> 
     </div> 
     <div class="frCell"> 
      <span>Recognition</span> 
     </div> 
    </div> 
</div>

我的div結構仍然遠離期望的佈局。我在每個div元素上都使用了css display-table。這裏是CSS：

div.frRow { 
    margin: 5px; 
    display: table; 
} 
div.frCell { 
    display: table-cell; 
    padding: 5px; 
} 
div.frCell span { 
    font-weight: bold; 
    margin-right: 5px; 
}

我不知道這是否是最好的方式來佈置這種類型的表單域。請讓我知道我可以如何獲得所需的佈局，或者如果有更好的方法來做到這一點。謝謝。

來源

2017-06-26 espresso_coffee

表結構由table > row > cell這樣：

您NEET設置容器的FormItem到display:table和行frRow到display:table-row得到表結構

div.formItem { 
 
    margin: 5px; 
 
    display: table; 
 
} 
 

 
div.frRow { 
 
    display: table-row; 
 
} 
 

 
div.frCell { 
 
    display: table-cell; 
 
    padding: 5px; 
 
    border:1px solid #ccc; 
 
} 
 

 
div.frCell span { 
 
    font-weight: bold; 
 
    margin-right: 5px; 
 
}

<div class="formItem"> 
 
    <div class="frRow"> 
 
    <div class="frCell"> 
 
     <span>Results</span> 
 
    </div> 
 
    </div> 
 
    <div class="frRow"> 
 
    <div class="frCell"> 
 
     <span>Ear</span> 
 
    </div> 
 
    <div class="frCell" style="width:100px;min-width:100px;"> 
 
     <span>250</span> 
 
    </div> 
 
    <div class="frCell"> 
 
     <span>500</span> 
 
    </div> 
 
    <div class="frCell"> 
 
     <span>750</span> 
 
    </div> 
 
    <div class="frCell"> 
 
     <span>1000</span> 
 
    </div> 
 
    <div class="frCell"> 
 
     <span>1500</span> 
 
    </div> 
 
    <div class="frCell"> 
 
     <span>2000</span> 
 
    </div> 
 
    <div class="frCell"> 
 
     <span>3000</span> 
 
    </div> 
 
    <div class="frCell"> 
 
     <span>4000</span> 
 
    </div> 
 
    <div class="frCell"> 
 
     <span>6000</span> 
 
    </div> 
 
    <div class="frCell"> 
 
     <span>8000</span> 
 
    </div> 
 
    </div> 
 
    <div class="frRow"> 
 
    <div class="formItem"> 
 
     <div class="frCell"> 
 
     <span>SRT<br>SAT</span> 
 
     </div> 
 
     <div class="frCell"> 
 
     <span>Recognition</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-06-26 16:29:45 Chiller

有沒有辦法對div元素的行跨度和跨距？ –

@espresso_coffee爲colspan你可以用'display：table'屬性將想要的單元格包裝在div中看看我的編輯 – Chiller

好的我有一個問題。在其中一個div單元格元素上，我試圖設置獨特的寬度，例如150px。這影響了該列中的所有div單元格。爲什麼以及如何解決這個問題？ –

-1

在你的CSS添加是

formItem{display:table;} 
frRow{display:table-row;} 
frCell{display:table-cell}

來源

2017-06-26 16:39:43 Osama

如何組織div看起來像一張桌子？

回答

相關問題