论坛表格设计

要做成这样的表格布局应该怎么做呢?

代码:html

<div id="foruminfo-table">
            <table border="1" class="foruminfo-table">
                <tbody>
                    <tr>
                        <td rowspan="3">
                            <div class="img"><img src="../../images/1_amandag.jpg" height="100px" width="100px"/></div>
                            <p>zhangwei</p>
                        </td>
                        <td colspan="2">
                             <span class="floor-tip">楼主</span>
                             <span class="floor-other">发表于:2013-12-12 12:00:00</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                             3
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span class="floor-tip">引用|管理</span>
                             <span class="floor-other">回复次数</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <table border="1" class="foruminfo-table">
                <tbody>
                    <tr>
                        <td rowspan="3">
                            <div class="img"><img src="../../images/1_amandag.jpg" height="100px" width="100px"/></div>
                            <p>zhangwei</p>
                        </td>
                        <td colspan="2">
                             <span class="floor-tip">#1</span>
                             <span class="floor-other">发表于:2013-12-12 12:00:00</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                             3
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span class="floor-tip">引用|管理</span>
                             <span class="floor-other">回复次数</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

css:

#foruminfo-table
{
    width: 980px;
    margin: 0 auto;
}
.img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}
.foruminfo-table
{
    width: 975px;
    margin: 0 auto;
    padding: 0;
    margin-bottom: 10px;
    border: 1px solid green;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 12px;
}
.foruminfo-table tbody tr:first-child td:first-child
{
    width: 180px;
    vertical-align: top;
    padding-top: 10px;
    background-color: #EFF4FB;
}

.foruminfo-table tbody tr:first-child td:first-child p
{
    text-align: center;
    color: blue;
}
.foruminfo-table tbody tr:first-child
{
    height: 25px;
}
.foruminfo-table tbody tr + tr
{
    height:150px;
    vertical-align: top;
    text-align: left;
}
.foruminfo-table tbody tr + tr > td
{
    padding: 10px;
}
.foruminfo-table tbody tr:last-child
{
    vertical-align:middle;
    height: 25px;
}
.foruminfo-table tbody tr:last-child >td
{
    padding: 0;
}
.floor-tip 
{
    float: right;
    margin-right: 10px;
}
.floor-other 
{
    float: left;
    margin-left: 10px;
}

 

 试试这个:

table {

border-spacing: 0;
border-collapse: collapse;
}
table td
{
border: 1px solid #B0D3E4;
}

posted @ 2014-01-15 10:53  Seaurl  阅读(388)  评论(0编辑  收藏  举报