HTML div table 和 css

Question

我正在尝试使用 DIV 标签和 CSS 创建 table，但我不明白为什么当我的屏幕很小时，我看到所有行都带有相同的宽度，但当我在更大的屏幕上查看它们时，我不这样做。

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 link：http://jsfiddle.net/cgxwt1dp/2/

有人可以帮我吗？

Answer 1

缺少 table-row 值，试试看是否有帮助。

.rTableRow {
    display:table-row;
}

Answer 2

如前所述，您忘记了 .rTableRow class。只是为您上传 jsfiddle，这样您就可以看到，我已经将 class 设为蓝色:)

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

敬礼！

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 table 和 css

HTML div table and css

html

css-tables