Question

我喜欢创建一个基于div的表。这是我的CSS代码：

.div-table{
display:table;         
width: 100%;         
border: 1px solid #C9C9C9;
}

.div-table-row{
display:table-row;
width: 100%;
clear:both;
text-align: center;
}

.div-table-row-head{
display:table-row;
background: #33A1DE;
color: #fff;
width: 100%;
line-height: 280%;
clear:both;
}

.div-table-col-head{
float:left;
display: table-column;
min-height: 50px;
border-right: 1px solid #C9C9C9;  
border-top: 1px solid #C9C9C9;
font-family: Verdana;
font-size: 17px;
border-top: none;
width: 100%;
padding-left: 15px;
}

.div-table-col{
float:left;
display: table-column;
min-height: 50px;
border-right: 1px solid #C9C9C9;  
border-top: 1px solid #C9C9C9;
font-family: Verdana;
font-size: 15px;
padding: 15px 0 5px 0;
}

我的HTML代码：

<div class="div-table">
<div class="div-table-row-head">
    <div class="div-table-col-head">USTAWIENIA</div>
</div>
<div class="div-table-row">
    <div class="div-table-col" style="width: 19.73%;">001 hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hh hh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hh hh hhh hhh hhh hhh</div>
    <div class="div-table-col" style="width: 20%;">002</div>
    <div class="div-table-col" style="width: 20%;">003</div>
    <div class="div-table-col" style="width: 20%;">003</div>
    <div class="div-table-col" style="width: 20%; border-right: none;">003</div>
</div>
<div class="div-table-row">
    <div class="div-table-col" style="width: 19.73%;">xxx</div>
    <div class="div-table-col" style="width: 20%;">yyy</div>
    <div class="div-table-col" style="width: 20%;">www</div>
    <div class="div-table-col" style="width: 20%;">www</div>
    <div class="div-table-col" style="width: 20%; border-right: none;">www</div>
</div>
<div class="div-table-row">
    <div class="div-table-col" style="width: 19.73%;">ttt</div>
    <div class="div-table-col" style="width: 20%;">uuu</div>
    <div class="div-table-col" style="width: 20%;">Mkkk</div>
    <div class="div-table-col" style="width: 20%;">Mkkk</div>
    <div class="div-table-col" style="width: 20%; border-right: none;">Mkkk</div>
</div>

输出结果为：http://jsbin.com/IkiqaSir

我如何删除行的边界？你可以在第一行看到它。

Answer 1

使用<table>

<强> JSFiddle Demo 1

JSFiddle Demo 2 - 其中一个单元格中包含大量内容的示例。

<强> CSS

table { border-collapse: collapse; width:100%;}
table {border:1px solid #ccc;}
table th { border-bottom:1px solid #ccc; text-align: left; padding:10px; background:#33A1DE; color:#fff;}
table td { padding:10px; border-bottom:1px solid #ccc; border-right:1px solid #ccc;}

<强> HTML

<table>
    <tr>
        <th colspan="5">content</th>
    </tr>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
</table>

根据div - 行的边框创建表

1 个答案: