How to create a table with divs and different column width? - html

Question

I have a table created only with divs with fixed width columns. But I need to change width of columns with bootstrap or any other way.
Html:
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="rTable">
<div class="rTableHeading">
<div class="rTableRow">
<div class="rTableHead">Title1 </div>
<div class="rTableHead">Title2 </div>
<div class="rTableHead">Title3 </div>
<div class="rTableHead">Title4 </div>
</div>
</div>
<div class="rTableBody">
<div class="rTableRow">
<div class="rTableCell">row1</div>
<div class="rTableCell">row1</div>
<div class="rTableCell">row1</div>
<div class="rTableCell">row1</div>
</div>
<div class="rTableRow">
<div class="rTableCell">row2</div>
<div class="rTableCell">row2</div>
<div class="rTableCell">row2</div>
<div class="rTableCell">row2</div>
</div>
</div>
</div>
</div>
</div>
Styles:
.rTable {
display: block;
width: 100%;
border: 1px solid #ddd;
}
.rTableHeading, .rTableBody, .rTableFoot, .rTableRow {
clear: both;
}
.rTableHead, .rTableFoot {
background-color: #FBFBFB;
font-weight: bold;
width: 100%;
padding: 0 !important;
}
.rTableCell, .rTableHead {
padding: 5px !important;
border-bottom: 1px solid #ddd;
float: left;
height: 17px;
overflow: hidden;
padding: 3px 1.8%;
width: 24%;
}
.rTableCell {
height: 46px;
}
.rTable:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
When I need 4 columns I should use width=24% for all columns. But how can I create columns with different width? Is there a way to use bootstrap column classes to do this?

Answer 1

You need to put your table in correctly first. Then you can resize columns as you want. I have recreated your table in html, and applied the css style to it to change the width of each column.
You should look at nth-child and nth-of-type in W3Schools sometime. Thery're very helpful.
thead th:nth-child(1) {
background: red;
width: 10%;
}
thead th:nth-child(2) {
background: pink;
width: 20%;
}
thead th:nth-child(3) {
background: purple;
width: 5%;
}
thead th:nth-child(4) {
background: green;
width: 50%;
}
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<table class="table table-striped table-hover table-condensed table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
<th>Title4</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 2

Yes there is, try this. If I understand the question correctly that is. I'm not 100% sure where you want to actually add the width, but I would assume this would do what you are asking for.
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="rTable">
<div class="rTableHeading">
<div class="rTableRow">
<div class="rTableHead col-sm-3">Title1 </div>
<div class="rTableHead col-sm-3">Title2 </div>
<div class="rTableHead col-sm-3">Title3 </div>
<div class="rTableHead col-sm-3">Title4 </div>
</div>
</div>
<div class="rTableBody">
<div class="rTableRow">
<div class="rTableCell col-sm-3">row1</div>
<div class="rTableCell col-sm-3">row1</div>
<div class="rTableCell col-sm-3">row1</div>
<div class="rTableCell col-sm-3">row1</div>
</div>
<div class="rTableRow">
<div class="rTableCell col-sm-3">row2</div>
<div class="rTableCell col-sm-3">row2</div>
<div class="rTableCell col-sm-3">row2</div>
<div class="rTableCell col-sm-3">row2</div>
</div>
</div>
</div>
</div>
</div>
Also, I would take out the width% in your CSS for rTableCell if you are utilizing the bootstrap column sizing. You can still add sizing here if you would like to see how it impacts your columns. It isn't right or wrong, but first see what it looks like without the width% and then come back to add width to your liking.
.rTableCell, .rTableHead {
padding: 5px !important;
border-bottom: 1px solid #ddd;
float: left;
height: 17px;
overflow: hidden;
padding: 3px 1.8%;
/* width: 24%; */
}

Answer 3

Maybe there is a better solution with bootstrap but I used this approach for now.
.rTableHeading .rTableHead:nth-child(1) ,
.rTableBody .rTableCell:nth-child(1) {
width: 30%;
}
.rTableHeading .rTableHead:nth-child(2) ,
.rTableBody .rTableCell:nth-child(2) {
width: 30%;
}
.rTableHeading .rTableHead:nth-child(3) ,
.rTableBody .rTableCell:nth-child(3) {
width: 15%;
}
.rTableHeading .rTableHead:nth-child(4) ,
.rTableBody .rTableCell:nth-child(4) {
width: 20%;
}
I also cleared width=24% from rTableCell and rTableHead.