2017-06-26 36 views
1

我有多個輸入字段形式,我想組織它們是這樣的:如何組織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; 
} 

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

回答

3

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

您NEET設置容器的FormItemdisplay:table和行frRowdisplay: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>

+0

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

+0

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

+0

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

-1

在你的CSS添加是

formItem{display:table;} 
frRow{display:table-row;} 
frCell{display:table-cell} 
相關問題