如何创建具有自动宽度的表div

Question

我试图将div HEAD创建为一个表，但当我添加另一个头时，它会向下显示，而不是向右显示。

换句话说，我希望表有六列宽，但它只有3列，并且行开始堆叠。

这是一个现场演示：

    .rTable {    
     display: block;
     width: 100%;
     font-size: 10px; 
    } 
    
    .rTableHeading, .rTableBody, .rTableFoot, .rTableRow{ 
     clear: both; 
    } 
    
    .rTableHead, .rTableFoot{    
      background-color: #DDD;    
      font-weight: bold;
    }
    
    .rTableCell, .rTableHead {     
      border: 1px solid #999999;
      float: left; 
      height: 17px; 
      overflow: hidden;
      padding: 3px 1.8%; 
      width: 28%;
    } 

   <div class="rTable"> 
      <div class="rTableRow"> 
        <div class="rTableHead">HEAD 1</div> 
        <div class="rTableHead">HEAD 2</div> 
        <div class="rTableHead">HEAD 3</div>  
        <div class="rTableHead">HEAD 4</div> 
        <div class="rTableHead">HEAD 5</div> 
        <div class="rTableHead">HEAD 6</div> 
      </div> 
  
      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 1.1</div>  
        <div class="rTableCell">row 1.2</div>  
        <div class="rTableCell">row 1.3</div>  
        <div class="rTableCell">row 1.4</div>  
        <div class="rTableCell">row 1.5</div>  
        <div class="rTableCell">row 1.6</div>  
      </div> 
  
      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 2.1</div>  
        <div class="rTableCell">row 2.2</div>  
        <div class="rTableCell">row 2.3</div>  
        <div class="rTableCell">row 2.4</div>  
        <div class="rTableCell">row 2.5</div>  
        <div class="rTableCell">row 2.6</div>  
      </div> 
      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 3.1</div>  
        <div class="rTableCell">row 3.2</div>  
        <div class="rTableCell">row 3.3</div>  
        <div class="rTableCell">row 3.4</div>  
        <div class="rTableCell">row 3.5</div>  
        <div class="rTableCell">row 3.6</div>  
      </div>  
    </div>

Answer 1

.rTableCell, .rTableHead {     
  border: 1px solid #999999;
  float: left; 
  height: 17px; 
  overflow: hidden;
  padding: 3px 1.8%; 
  width: calc(100% / 6); 
  box-sizing: border-box;
  } 

Answer 2

一个简单的方法是使用width: calc(100% / 6);（使一列的宽度为父列宽度的六分之一）和box-sizing: border-box;（忽略元素宽度的填充）：

.rTable {    
     display: block;
     width: 100%;
     font-size: 10px; 
    } 
    
    .rTableHeading, .rTableBody, .rTableFoot, .rTableRow{ 
     clear: both; 
    } 
    
    .rTableHead, .rTableFoot{    
      background-color: #DDD;    
      font-weight: bold;
    }
    
    .rTableCell, .rTableHead {     
      border: 1px solid #999999;
      float: left; 
      height: 17px; 
      overflow: hidden;
      padding: 3px 1.8%; 
      width: calc(100% / 6); 
      box-sizing: border-box;
    }

<div class="rTable"> 
      <div class="rTableRow"> 
        <div class="rTableHead">HEAD 1</div> 
        <div class="rTableHead">HEAD 2</div> 
        <div class="rTableHead">HEAD 3</div>  
        <div class="rTableHead">HEAD 4</div> 
        <div class="rTableHead">HEAD 5</div> 
        <div class="rTableHead">HEAD 6</div> 
      </div> 
  
      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 1.1</div>  
        <div class="rTableCell">row 1.2</div>  
        <div class="rTableCell">row 1.3</div>  
        <div class="rTableCell">row 1.4</div>  
        <div class="rTableCell">row 1.5</div>  
        <div class="rTableCell">row 1.6</div>  
      </div> 
  
      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 2.1</div>  
        <div class="rTableCell">row 2.2</div>  
        <div class="rTableCell">row 2.3</div>  
        <div class="rTableCell">row 2.4</div>  
        <div class="rTableCell">row 2.5</div>  
        <div class="rTableCell">row 2.6</div>  
      </div> 
      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 3.1</div>  
        <div class="rTableCell">row 3.2</div>  
        <div class="rTableCell">row 3.3</div>  
        <div class="rTableCell">row 3.4</div>  
        <div class="rTableCell">row 3.5</div>  
        <div class="rTableCell">row 3.6</div>  
      </div>  
    </div>

Answer 3

您的rTableCell和rTableHead在CSS中设置为width: 28%;。六个并排是168%。

如果你想适应六个交叉，你需要做一些更像16%的事情。

Answer 4

这是因为你的细胞有28%宽。这远远超过了最大值的100%。10%工作例如：JSFiddle

比绝对百分比更好的是像calc(100% / 6)这样的计算百分比。

我想问一下，为什么用div而不是<table>创建表？会容易得多。