2

データグリッドを作成しようとしていますが、2 つの問題に遭遇しました。

border-collapse: separate; を使用する必要がありました。上の丸い角を取得します。しかし、そうすることで、tr botton に境界線を追加する機能が失われました。

洞察はありますか？

http://fiddle.jshell.net/KNb7K/

CSS:

table.dgrid {
    border: solid 1px #CDCDCD;
    .border-radius(8px, 0px, 0px, 8px);
    width: 100%;
    border-collapse: separate;
}
table.dgrid th:first-child{
    .border-radius(0px, 0px, 0px, 8px);
}

table.dgrid th:last-child{
    .border-radius(8px, 0px, 0px, 0px);
}

table.dgrid th{
    background-color: #E6E6E6;
}
table.dgrid tr th:last-child, table.dgrid tr td:last-child{
    border-right: 0px; 
}
table.dgrid tbody tr:last-child {
    border-bottom: 0;
}
table.dgrid tr {
    border-bottom: solid 1px #CDCDCD;
    border-collapse: collapse ;   
}
table.dgrid th, table.dgrid td {
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    border-right: solid 1px #CDCDCD;
}

html:

<table class="dgrid">
    <thead>
        <tr>
            <th>Ativar</th>
            <th>Imagem</th>
            <th>Posição</th>
            <th>Link</th>
            <th>Excluir</th>
        </tr>
    </thead>   
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td></td>
            <td></td>
            <td><input type="text" /></td>
            <td></td>
        </tr>
                <tr>
            <td><input type="checkbox" /></td>
            <td></td>
            <td></td>
            <td><input type="text" /></td>
            <td></td>
        </tr>
                <tr>
            <td><input type="checkbox" /></td>
            <td></td>
            <td></td>
            <td><input type="text" /></td>
            <td></td>
        </tr>
    </tbody>
</table>
4

3 に答える 3

2

あなたはbottom-border上に置くことができますtable.dgrid th, table.dgrid td、そして私はそこにあるように更新table.dgrid tbody tr:last-childします：tdtable.dgrid tbody tr:last-child td

于 2013-02-07T15:05:43.333 に答える
1

から削除border-collapse: separate;しtable.dgridます。

于 2013-02-07T15:02:19.303 に答える
0

これは機能します：

table.dgrid {
    width: 98%;
    border-collapse: separate;
    border-bottom: solid 1px #CDCDCD;
    margin:1%;
}
table.dgrid th:first-child{
    border-top-left-radius: 8px;
}
table.dgrid th:first-child, table.dgrid td:first-child{
    border-left: solid 1px #CDCDCD;
}
table.dgrid th:last-child{
    border-top-right-radius: 8px;
}
table.dgrid th{
    background-color: #E6E6E6;
}
table.dgrid tbody tr:last-child {
    border-bottom: 0;
}
table.dgrid th, table.dgrid td {
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    border-top: solid 1px #CDCDCD;
    border-right: solid 1px #CDCDCD;
}
于 2013-02-07T15:29:30.807 に答える