zoukankan      html  css  js  c++  java
  • 论坛表格设计

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

    代码: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;
    }

  • 相关阅读:
    【黑客免杀攻防】读书笔记2
    【逆向工具】IDA使用5-( string、图形化与视图的切换、图形化显示反汇编地址、自动注释、标签使用)
    定位内网中毒主机IP经历小记
    【黑客免杀攻防】读书笔记1
    对HUAWEI-ManagedProvisioning的一次不完整分析
    【PE结构】由浅入深PE基础学习-菜鸟手动查询导出表、相对虚拟地址(RVA)与文件偏移地址转换(FOA)
    一份通过IPC$和lpk.dll感染方式的病毒分析报告
    浅析
    HTTP协议/RTSP协议/RTMP协议的区别
    iOS
  • 原文地址:https://www.cnblogs.com/zhangwei595806165/p/3520368.html
Copyright © 2011-2022 走看看