分享

tabel隐藏第一行控制列宽

 JuNCheN.Home 2011-08-16
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www./tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>隐藏第一列</title>
        <style type="text/css">
.table_style {
    
}
.table_style td {
    font-size: 12px;
    word-break: break-all;
}
.noheight th {
    border-top-width: 1px;
    border-bottom: none;
    border-left: none;
    border-right: none;
    font-size: 0px;
    height: 0px;
    line-height: 0px;
}
.notop td {
    border-top: none;
}
<!--
内嵌表格若需要去掉,使用该样式 -->.noborder,.noborder th,.noborder td {
    border: none;
}
</style>
    </head>
    <body>
        <div style="width: 400px; text-align: center;">
            <!-- table上加入table_styleclass -->
            <table border="1" cellpadding="0" cellspacing="0" style="width: 100%"
                class="table_style">
                <!-- 第一列tr上加入noheightclasstd中需要有 占位。所有单元格宽度全部在此设置。 -->
                <tr class="noheight">
                    <th style="width: 150px;">
                         
                    </th>
                    <th style="width: 150px;">
                         
                    </th>
                    <th style="width: 150px;">
                         
                    </th>
                    <th style="width: 150px;">
                         
                    </th>
                    <th style="width: 150px;">
                         
                    </th>
                    <th>
                         
                    </th>
                </tr>
                <!-- 第二列tr上加入notopclass,若需要加其他class样式,可以空格后继续写入classname -->
                <tr class="notop otherstyle">
                    <td>
                        1-1
                    </td>
                    <td colspan="2">
                        1-2
                    </td>
                    <td>
                        1-3
                    </td>
                    <td colspan="2">
                        1-4
                    </td>
                </tr>
                <tr id="tr3">
                    <td>
                        2-1
                    </td>
                    <td>
                        2-2
                    </td>
                    <td>
                        2-3
                    </td>
                    <td>
                        2-4
                    </td>
                    <td>
                        2-5
                    </td>
                    <td>
                        2-6
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约