Question

我试图使用DIV标签和CSS创建一个表但我不明白为什么，当我有小屏幕时，我看到所有行具有相同的宽度，但当我在一个更大的屏幕我没有。

Html代码：

<div class="rTable">
<div class="rTableRow">
    <div class="rTableHeadInc1">Rif.</div>
    <div class="rTableHeadInc2">Realizzazione incentivata nell&#8217;anno</div>
    <div class="rTableHeadInc3">Numero di richieste accettate</div>
    <div class="rTableHeadInc4">Importo versato [CHF]</div>
</div>
<div class="rTableRow">
    <div class="rTableCellInc1">ID1</div>
    <div class="rTableCellInc2">Allacciamento a reti di teleriscaldamento</div>
    <div class="rTableCellInc3">
        <input type="text" name="ID1NumAccept" value="" />
    </div>
    <div class="rTableCellInc4">
        <input type="text" name="ID1Pay" value="" onblur="isNumber(this);" />
    </div>
</div>
<div class="rTableRow">
    <div class="rTableCellInc1">ID2</div>
    <div class="rTableCellInc2">Altri ambiti legati alla distribuzione
        <br/>
        <input type="text" name="ID2OtherDesc" value="" />
    </div>
    <div class="rTableCellInc3">
        <input type="text" name="ID2NumAccept" value="" />
    </div>
    <div class="rTableCellInc4">
        <input type="text" name="ID2Pay" value="" onblur="isNumber(this);" />
    </div>
</div>

CSS代码：

    input[type="text"] {
    width: 85%;
    border: 1px solid #CCC;
}
.rTable {
    display: table;
    width: 70%;
    height:100%;
}
.rTableRow {
    clear: both;
    height:100%;
    width:100%;
}
.rTableHeadInc1 {
    display: table-cell;
    background-color: #DDD;
    font-weight: bold;
    border: 1px solid #999999;
    height:100%;
    width: 10%;
}
.rTableHeadInc2 {
    display: table-cell;
    background-color: #DDD;
    font-weight: bold;
    overflow: hidden;
    border: 1px solid #999999;
    height:100%;
    width: 36%;
}
.rTableHeadInc3 {
    display: table-cell;
    background-color: #DDD;
    font-weight: bold;
    border: 1px solid #999999;
    height:100%;
    width: 27%;
}
.rTableHeadInc4 {
    display: table-cell;
    background-color: #DDD;
    font-weight: bold;
    border: 1px solid #999999;
    height:100%;
    width: 27%;
}
.rTableCellInc1 {
    border: 1px solid #999999;
    display: table-cell;
    height:100%;
    width: 10%;
}
.rTableCellInc2 {
    border: 1px solid #999999;
    display: table-cell;
    height:100%;
    width: 36%;
}
.rTableCellInc3 {
    border: 1px solid #999999;
    display: table-cell;
    height:100%;
    width: 27%;
    text-align:center;
}
.rTableCellInc4 {
    border: 1px solid #999999;
    display: table-cell;
    text-align:center;
    height:100%;
    width: 27%;
}

以下是我的html和css的jsfiddle链接：http://jsfiddle.net/cgxwt1dp/2/

有人能帮助我吗？

Answer 1

缺少table-row值，请尝试此操作，看看是否有帮助。

.rTableRow {
    display:table-row;
}

Answer 2

如上所述，你忘记了.rTableRow课程。只需为你上传jsfiddle，你就可以看到，我已经把课程变成了蓝色：）

http://jsfiddle.net/Katherina/cgxwt1dp/3/

Saluti！

Answer 3

我会使用普通的老桌子来节省你的头痛。

JSFiddle

<强> HTML

<table cellpadding="0" cellspacing="0">
<tr>
    <th>Rif.</th>
    <th>Realizzazione incentivata nell&#8217;anno</th>
    <th>Numero di richieste accettate</th>
    <th>Importo versato [CH]</th>
</tr>
<tr>
    <td>ID1</td>
    <td>Allacciamento a reti di teleriscaldamento</td>
    <td>
        <input type="text" name="ID1NumAccept" value="" />
    </td>
    <td>
        <input type="text" name="ID1Pay" value="" onblur="isNumber(this);" />
    </td>
</tr>
<tr>
    <td>ID2</td>
    <td>Altri ambiti legati alla distribuzione
        <br/>
        <input type="text" name="ID2OtherDesc" value="" />
    </td>
    <td>
        <input type="text" name="ID2NumAccept" value="" />
    </td>
    <td>
        <input type="text" name="ID2Pay" value="" onblur="isNumber(this);" />
    </td>
</tr>
</table>

<强> CSS

input[type="text"] {
    width: 85%;
    border: 1px solid #CCC;
}
table{
    width:70%;
    border:0;
    margin-bottom:10px;
}
th {
    background-color: #DDD;
    font-weight: bold;
    text-align:left;
}
th, td{
    vertical-align:top;
    padding:2px;
    border: 1px solid #999999;
    border-left:0;
    border-top:0;
}
th:first-child, td:first-child {
    border-left: 1px solid #999999;
    width:10%;
}
tr:first-child th{
    border-top: 1px solid #999999;
}
th:nth-child(2){
    width:36%;

}
th:nth-child(3) ,th:nth-child(4) {
    width:27%;    
}
td:nth-child(3) ,td:nth-child(4) {
    text-align:center;
}

HTML div表和css

3 个答案: