• 论坛表格设计


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

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

  • 相关阅读:
    [专项]tcp状态机,为什么3次握手(很好)(done)
    Win7系统如何创建计划任务的小技巧(图文)
    Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory
    Java项目 使用MyEclipse打包生成jar文件方法
    excel插入柱形图和插入置信值
    关于Virtual Box虚拟机里的系统不能启动的解决方法
    html文件的中文乱码问题与在浏览器中的显示 .
    Windows的计划任务
    不能为虚拟电脑 Fedora1 打开一个新任务.
    bat 通过bat脚本来每隔一段时间运行jar包
  • 原文地址:https://www.cnblogs.com/zhangwei595806165/p/3520368.html
Copyright © 2020-2023  润新知