Question

我正在使用div而不是table，但是当列中的内容增加时，我没有增加边框。

<div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Customer ID</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                  <div class="divCell">001</div>
                <div class="divCell">002</div>
                <div class="divCell">am unable to get the white space between col while the content increases</div>
            </div>
            <div class="divRow">
                <div class="divCell">xxx</div>
                <div class="divCell">yyy</div>
                <div class="divCell">www</div>
           </div>
            <div class="divRow">
                <div class="divCell">ttt</div>
                <div class="divCell">uuu</div>
                <div class="divCell">Mkkk</div>
           </div>

      </div>

.divTable{
  display:table;         
  width:auto;         
  background-color:#eee;         
  border:1px solid  #666666;         
  border-spacing:5px;
}
.divRow{
  display:table-row;
  width:auto;
  clear:both;
    background-color:#ccc;  
}
.divCell{
  float:left;
  display:table-column;         
  width:100px;         
border-left: 2px solid #fff;
}

请浏览以下链接：

http://jsfiddle.net/vasanthanvas/H4Zug/

Answer 1

您必须使用display:table-cell代替display:table-column并移除float:left .divCell。

并添加此样式：

.headRow{
    display:table-row;
}

http://jsfiddle.net/4Y6cJ/3/

html中div标签的表结构

1 个答案: