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

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

<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%。但是如何创建不同宽度的列呢？有没有办法使用引导列类来做到这一点？

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

您应该在某个时候查看W3Schools中的第n个孩子和第n个类型。泰里非常乐于助人。

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>

是的，试试这个。如果我正确理解了这个问题。我不是 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>

另外，如果您

正在使用引导列大小，我会在 rTableCell 的 CSS 中取出宽度%。如果您想了解它如何影响您的列，您仍然可以在此处添加大小调整。它没有对错，但首先看看没有宽度%的样子，然后回来根据自己的喜好添加宽度。

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

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

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

相关内容

最新更新

热门标签：