html - 如何创建具有 div 和不同列宽的表格？

Question

我有一个仅使用具有固定宽度列的 div 创建的表格。但我需要使用 Bootstrap 或任何其他方式更改列的宽度。

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>

样式:

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

当我需要 4 列时，我应该对所有列使用 width=24%。但是如何创建不同宽度的列呢？有没有办法使用 Bootstrap 列类来执行此操作？

Answer 1

你需要先把你的 table 放好。然后您可以根据需要调整列的大小。我已经用 html 重新创建了您的表格，并对其应用了 css 样式以更改每列的宽度。

你应该找个时间看看 W3Schools 中的 nth-child 和 nth-of-type。他们非常乐于助人。

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>