论坛表格设计

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

代码: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 @   Seaurl  阅读(391)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示