如何创建具有 div 和不同列宽的 table？

Question

我有一个 table 仅使用具有固定宽度列的 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

是的，试试这个。如果我正确理解了这个问题，那就是。我不是 100% 确定你想在哪里实际添加宽度，但我认为这会满足你的要求。

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

此外，如果您正在使用 bootstrap 列大小调整，我会在 rTableCell 的 CSS 中去掉 width%。如果您想查看大小调整如何影响您的列，您仍然可以在此处添加大小调整。没有对错之分，先看看去掉 width% 后的样子，再回来根据自己的喜好加宽。

.rTableCell, .rTableHead {
    padding: 5px !important;
    border-bottom: 1px solid #ddd;
    float: left;
    height: 17px;
    overflow: hidden;
    padding: 3px 1.8%;
    /* width: 24%; */ 
}

Answer 2

您需要先正确输入 table。然后您可以根据需要调整列的大小。我在 html 中重新创建了您的 table，并对其应用了 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>

Answer 3

也许 bootstrap 有更好的解决方案，但我现在使用这种方法。

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

我还从 rTableCell 和 rTableHead 中清除了 width=24%。

如何创建具有 div 和不同列宽的 table？

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

html

css

column-width

css-tables

twitter-bootstrap