自動幅のテーブルdivを作成するにはどうすればよいですか？

Question

DIV HEADをテーブルとして作成しようとしていますが、別のヘッドを追加すると、右にではなく下に表示されます。

つまり、テーブルを6列幅にしたいのですが、それはわずか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

簡単な方法は、（素子幅のためのパディングを無視する）width: calc(100%/6);（親幅の1列1つの第六を作る）と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 2

あなたrTableCellとは、あなたのCSSにwidth: 28%;に設定されています。 6つのサイドバイサイドは168％です。

6つの桁に合わせたい場合は、16%のようにする必要があります。

Answer 3

.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 4

あなたのセルの幅が28％であるからです。それは最大値である100％をはるかに超えています。例えば、10％は、JSFiddle

のように計算され、calc(100%/6)のように計算されます。あなたが<table>をdivのことでテーブルを作成していない理由を

は、私が聞いてもいいですか？はるかに簡単だろう。