Wie kann ich eine Tabelle Div mit automatischer Breite erstellen?

Ich versuche, DIV HEAD als Tabelle zu erstellen, aber wenn ich einen anderen Kopf hinzufüge, zeigt es sich nach unten und nicht nach rechts.Wie kann ich eine Tabelle Div mit automatischer Breite erstellen?

Mit anderen Worten, ich möchte, dass die Tabelle sechs Spalten breit ist, aber es ist nur 3, und die Zeilen beginnen zu stapeln.

Hier ist eine Live-Demo:

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

Quelle

2016-08-03 Carlos Morales

Eine einfache Möglichkeit ist width: calc(100%/6); zu verwenden (bilden eine Spalte ein sechstes der Mutterbreite) und box-sizing: border-box; (ignoriere Polsterung für Elementbreite):

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

Quelle

2016-08-03 21:12:54 andreas

Wenn ich mehr als 6 und mit mehr Worten HEAD zum Beispiel hinzufügen: statt HEAD1 NAME DES MITARBEITERS - NAME DER FRAU anzeigen ... das wird ein Problem sein ... gibt es einen anderen Weg, dies dynamisch zu machen? –

Sie haben zwei Optionen für längere Kopftitel: 1. Geben Sie der Tabelle mehr Breite oder 2. brechen Sie lange Titel in mehrere Zeilen ... – andreas

Danke, es hat funktioniert. –

Ihre rTableCell und zu width: 28%; in Ihrem CSS festgelegt werden. Sechs Seite an Seite ist 168%.

Wenn Sie sechs übertreffen möchten, müssen Sie etwas mehr wie 16% tun.

Quelle

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; 
    }

Quelle

2016-08-03 21:11:35 patrickcipot

Dies wird nicht arbeiten, weil der Polsterung ... – andreas

Es funktioniert wegen 'Box-Sizing: border-box;') – patrickcipot

Sicher! Das ist eine andere Geschichte;) Ich habe meinen Ausschnitt mit dieser Idee aktualisiert. – andreas

Es ist, weil Ihre Zellen 28% breit sind. Das ist weit mehr als 100%, was das Maximum ist. 10% funktioniert zum Beispiel: JSFiddle

Besser als absolute Prozentsätze würde berechnet werden wie calc(100%/6).

Darf ich fragen, warum Sie Tabellen von div s und nicht <table> erstellen? Wäre viel einfacher.

Quelle

2016-08-03 21:11:46 mxmehl

Wie kann ich eine Tabelle Div mit automatischer Breite erstellen?

Antwort

Verwandte Themen