如何组织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看起来像一张桌子？

回答

相关问题