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

  • 相关阅读:
    中国剩余定理
    hdu1808-Halloween treats(抽屉原理)
    快速幂算法
    因子和与因子个数
    乘性函数
    HDU 2669 Romantic (扩展欧几里得定理)
    扩展欧几里得算法
    Bi-shoe and Phi-shoe(欧拉函数)
    欧拉函数
    [51nod]1284 2 3 5 7的倍数(容斥原理)
  • 原文地址:https://www.cnblogs.com/zhangwei595806165/p/3520368.html
Copyright © 2011-2022 走看看