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

原创 2018年04月14日 22:46:41

以下是源码:

<!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>



Linux 传奇

 作者:葛林?穆迪译者: 杜默 《Linux 传奇》速记电算界变革,缕述「自由」软体兴起,成为 Windows 2000 与所有专属软体之外的另类选择的经纬,由内而外描述开放原始码如何从一开始只一个颇...
  • jiangtao
  • jiangtao
  • 2001-05-26 10:11:00
  • 3356

HTML 表格中的行合并与列合并

colspan是横向合并;rowspan是纵向合并。 在表格制作中,常常要用到列合并与行合并的属性。下面是一个七行三列的表格,我们来观察一下列合并与行合并后的情况。...
  • yusirxiaer
  • yusirxiaer
  • 2017-06-09 11:45:04
  • 12166

使用原生js+jquery 对加载好的表格进行部分列的合并

在html中的表格加载好以后,对部分具有相同值,需要合并的制定单元格进行合并 先来效果图: 点击前: 点击后: 说明: combineCell(tableId,refInde...
  • qq_25877301
  • qq_25877301
  • 2016-03-11 12:07:23
  • 915

<zz>latex中图片和文字并列排放

http://www.ctex.org/documents/latex/graphics/node113.html 这篇文章中介绍了使用minipage的方式混排图片和文字,达到图片在右侧,文字在左...
  • interxuxing
  • interxuxing
  • 2012-10-19 18:34:54
  • 11009

css三列布局,左边两个div固定,最右边宽度自适应

1-3-1一列固定,左边两侧固定,最右边宽度自适应 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -...
  • wuzhe128520
  • wuzhe128520
  • 2016-05-02 16:23:25
  • 1426

ctex表格实例——多行多列合并

需要加入宏: \usepackage{multirow} \begin{table*}[!t] \centering \caption{Experimental e...
  • breeze5428
  • breeze5428
  • 2014-09-09 15:20:07
  • 1817

bootstrap表格列合并

  • 2017年10月17日 12:23
  • 135KB
  • 下载

Latex Table 合并行/列详解

1. 整体逻辑整个table是由大小一致的单元格组成的,在这个基础上,我们通过合并单元格(行/列)的方式,实现整个table的设计:竖线用“|”,横线用“\cline“,列合并用”\multicolu...
  • Canhui_WANG
  • Canhui_WANG
  • 2017-06-08 16:28:01
  • 4730

ITEXT 表格的指定列合并

问题场景最近做一个项目的升级,用的是itext写PDF报告,对于一个表格,要求某一列按照值的本身是否重复来合并行。CODE需要导入的包:itext-pdfa-5.5.6.jar、itext-xtra-...
  • sand_clock
  • sand_clock
  • 2017-06-09 14:23:31
  • 2312

RDLC报表合并列问题处理

之前负责的一个项目 C# winform 客户端连 J2EE 应用,其中 C# 客户端报表使用的是 RDLC 报表,最近用户反映 RDLC 报表导出 Excel 时会产生莫名其妙的列合并问题,为此抽取...
  • yang_629
  • yang_629
  • 2015-10-20 17:34:44
  • 1241
收藏助手
不良信息举报
您举报文章:表格左边合并列,右边详情展开
举报原因:
原因补充:

(最多只允许输入30个字)