html表格设计

最新推荐文章于 2024-10-15 13:31:06 发布

骨子里的偏爱

最新推荐文章于 2024-10-15 13:31:06 发布

阅读量209

点赞数 1

分类专栏： js 文章标签： html javascript chrome

本文链接：https://blog.csdn.net/weixin_41823246/article/details/141088881

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html表格设计

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Rowspan</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        td.content-cell {
            height: 80px; /* Adjust the height of the content cell as needed */
        }
    </style>
</head>
<body>

    <table id="dynamicTable">
        <tr>
            <td colspan="5">名称</td>
        </tr>
        <tr>
            <th>序号</th>
            <th>井号</th>
            <th>时间</th>
            <th>状态</th>
            <td class="content-cell"></td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>2023年10月</td>
            <td>正常</td>
        </tr>
 <tr>
            <td>1</td>
            <td>张三</td>
            <td>2023年10月</td>
            <td>正常</td>
        </tr>
 <tr>
            <td>1</td>
            <td>张三</td>
            <td>2023年10月</td>
            <td>正常</td>
        </tr>
        <!-- Add more rows as needed -->
    </table>

    <script>
        // Calculate and set rowspan dynamically
        window.onload = function() {
            var table = document.getElementById("dynamicTable");
            var rowCount = table.getElementsByTagName("tr").length;
            var contentCell = table.querySelector(".content-cell");
            contentCell.setAttribute("rowspan", rowCount - 1);
        };
    </script>

</body>
</html>