较为复杂的表格样式Demo

最新推荐文章于 2024-04-09 11:07:43 发布

吉普赛的歌

最新推荐文章于 2024-04-09 11:07:43 发布

阅读量4.6k

点赞数

分类专栏：前端 - HTML 文章标签： class border function xhtml table html

本文链接：https://blog.csdn.net/yenange/article/details/7188638

版权

前端 - HTML 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .currPageTableOuter{ width:100%;border:2px solid blue;border-collapse:collapse}
        .currSpecialPrevTrTd{border-bottom:1px solid black;}
        .currSpecialTr{background-color:#D4D0C8}
        .currSpecialTd1st{border:2px solid black; }
        .currSpecialTd2nd{border-right-style:none;border-bottom:none;}
        .currSpecialTd3rd{border-right-style:none;border-left-style:none;border-bottom:none;}
        .currSpecialTd4th{border-right-style:none;border-left-style:none;border-bottom:none;}
        .currHalfTdLeft{width:50%;border-top:none;border-right:none;}
        .currHalfTdRight{border-top:none;border-left:none;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".currSpecialTd1st").each(function () {
                var td1stWidth = 30;
                $(this).width(td1stWidth);
                var td3rdWidth = $(this).next().next().width();
                var td4thWidth = $(this).next().next().next().width();
                $(this).next().width(td3rdWidth + td4thWidth - td1stWidth);
            });
        });
    </script>
</head>
<body>
    <table border="1" cellspacing="1" cellpadding="2" class="currPageTableOuter" >
        <tr>
            <td colspan="4" align="center" class="currSpecialPrevTrTd" >Title</td>
        </tr>
        <tr class="currSpecialTr" >
            <td class="currSpecialTd1st">M1:</td>
            <td class="currSpecialTd2nd">
                xxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
            <td class="currSpecialTd3rd"></td>
            <td class="currSpecialTd4th"></td>
        </tr>
        <tr>
            <td colspan="2" class="currHalfTdLeft">
                A:<textarea style="width:99%;height:200px;" >
                  </textarea>
            </td>
            <td colspan="2" class="currHalfTdRight">
                B:<textarea style="width:99%;height:200px;" >
                  </textarea>
            </td>
        </tr>
    </table>
</body>
</html>

吉普赛的歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
较为复杂的表格样式Demo

.currPageTableOuter{ width:100%;border:2px solid blue;border-collapse:collapse} .currSpecialPrevTrTd{border-bottom:1px solid black;} .currSpecialTr{background-color:#D4D0C8} .c
复制链接

扫一扫