表格左边合并列,右边详情展开

以下是源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        *{
          margin: 0;
          padding: 0;
        }
        table{
           border-collapse:collapse;
        }
        td{
            height:21px;
        }
  </style>
</head>
<body>
    <table width="800" border="1">
        <tr>
            <td width="25%" rowspan="4" align="center">员工1</td>
            <td width="75%"></td>
        </tr>
        <tr>
            <td width="75%">详情2</td>
        </tr>
        <tr>
            <td width="75%">详情3</td>
        </tr>
        <tr>
            <td width="75%">详情4</td>
        </tr>


        <tr>
            <td width="25%" rowspan="4" align="center">员工2</td>
            <td width="75%">详情5</td>
        </tr>
        <tr>
            <td width="75%">详情6</td>
        </tr>
        <tr>
            <td width="75%">详情7</td>
        </tr>
        <tr>
            <td width="75%">详情8</td>
        </tr>
    </table>
    <table width="800" border="1" style="margin-top: -1px;">
        <tr>
            <td width="25%" rowspan="4" align="center">员工3</td>
            <td width="75%">详情9</td>
        </tr>
        <tr>
            <td width="75%">详情10</td>
        </tr>
        <tr>
            <td width="75%">详情11</td>
        </tr>
        <tr>
            <td width="75%">详情12</td>
        </tr>
    </table>
</body>

</html>



阅读更多
上一篇vscode怎么快速打不是html标签的双标签呢?比如vue里面的自定义双标签
下一篇粘贴板管理工具ditto的使用
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭