如何創建自動寬度的表格div？

我想創建DIV HEAD作爲表，但是當我添加另一個頭時，它顯示下來，而不是右側。如何創建自動寬度的表格div？

換句話說，我希望表格是六列寬，但只有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>

來源

2016-08-03 Carlos Morales

一個簡單的方法是使用width: calc(100%/6);（使一列父寬度的第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>

來源

2016-08-03 21:12:54 andreas

如果我添加了超過6個字，並且以HEAD爲例：而不是HEAD1顯示員工姓名 - 妻子名字......這將是一個問題......有沒有其他方式可以以動態的方式進行此操作？ –

對於更長的頭部標題，您有兩個選項：1.給表格增加寬度或2.將長標題分成多行... – andreas

感謝它的工作。 –

你rTableCell和在你的CSS設置爲width: 28%;。六個並排是168％。

如果你想適應六個交叉，你需要做更多的事情，比如16%。

來源

2016-08-03 21:10:33 Santi

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

來源

2016-08-03 21:11:35 patrickcipot

這不會因爲工作的填充... – andreas

它會因爲'box-sizing：border-box;';） – patrickcipot

當然可以！這是一個不同的故事;）我用這個想法更新了我的片段。 – andreas

這是因爲你的細胞有28％的寬度。這遠遠超過100％，這是最大的。 10％的作品，例如：JSFiddle

好於絕對百分比將計算如calc(100%/6)。

請問您爲什麼要創建表格div而不是<table>？會容易得多。

來源

2016-08-03 21:11:46 mxmehl

如何創建自動寬度的表格div？

回答

相關問題