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;
    }

  • 相关阅读:
    MySQL启动和关闭命令总结
    MySQL数据库5.6版本首次安装Root密码问题
    tomcat 9性能调优注意事项
    扫除减脂之路上的几个小障碍
    MySQL常见面试题
    关于邮箱发送邮件二之附件及图片
    关于邮箱发送邮件
    关于算法
    python中常见的数据类型
    C++实现复数类的输入输出流以及+-*/的重载
  • 原文地址:https://www.cnblogs.com/zhangwei595806165/p/3520368.html
Copyright © 2011-2022 走看看