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

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>