CODEWITHSUNDEEP
htmlcss
Carlos Morales
Carlos Morales

Reputation: 1149

How can I create a table div with auto width?

I'm trying to create DIV HEAD as a table, but when I add another head it shows down and not to the right.

In other words, I want the table to be six columns wide, but it is only 3, and the rows start to stack.

Here is a 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>

Upvotes: 0

Views: 1845

Answers (4)

andreas
andreas

Reputation: 16936

An easy way is to use width: calc(100% / 6); (make one column one 6th of the parent width) and box-sizing: border-box; (ignore padding for element width):

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

Upvotes: 1

mxmehl
mxmehl

Reputation: 370

It's because your cells are 28% wide. That's far more than 100% which is the maximum. 10% works for example: JSFiddle

Better than absolute percentages would be calculated ones like calc(100% / 6).

May I ask why you create tables by divs and not <table>? Would be much easier.

Upvotes: 1

patrickcipot
patrickcipot

Reputation: 307

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

Upvotes: 2

Tyler Roper
Tyler Roper

Reputation: 21672

Your rTableCell and rTableHead are set to width: 28%; in your CSS. Six side-by-side is 168%.

If you want to fit six accross, you'll need to do something more like 16%.

Upvotes: 1

Related Questions