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

是的，试试这个。如果我正确地理解了这个问题。我不是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列大小调整，我会在CSS中为rTableCell取出宽度％。如果您想了解它对列的影响，您仍然可以在此处添加大小调整。这不是对或错，但首先要看看没有宽度％的样子，然后再回来根据自己的喜好添加宽度。

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

Answer 2

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

你应该在W3Schools看一下nth-child和nth-of-type。 Thery非常有帮助。

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

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

如何创建一个包含div和不同列宽的表？

3 个答案: