excel2013行列如何转换

xcel2013行列转换教程：

软件版本：
软件大小：
软件授权：
适用平台：
http://dl.pconline.com.cn/download/356399.html

行列转换步骤1：打开Excel2013，新建空白文档，在第一行的单元格里输入一些内容。

行列转换步骤2：选中这些单元格，右键复制。

行列转换步骤3：在第一列空白处，右键点击->；选择性粘贴->；选择性粘贴。

行列转换步骤4：弹出选择性粘贴界面，勾选转置选项，确定。

行列转换步骤5：刚才选定的单元格依次生成数据，这样就实现了行列转置的目的。

表格动态添加行列有两种方法(推荐使用第二种)

1)使用document.createElement('标签')的方法动态创建行列

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动态创建行列标签</title>
    <style type="text/css">
        #tbList {
            width: 500px;
            border: 1px solid blue;
            border-collapse: collapse;
            margin: auto;
        }

        tr, td {
            border: 1px solid blue;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        //页面加载完毕后执行
        window.onload = function () {
            //获取表格对象
            var tb = document.getElementById('tbList');
            //json格式的单元格数据
            var datas = { '360': 'http://www.360.cn', '百度': 'https://www.baidu.com', '腾讯': 'https://www.qq.com' };
            //使用for in 循环创建行列
            for (var key in datas) {
                //创建行对象
                var tr = document.createElement('tr');
                //创建第一列
                var td1 = document.createElement('td');
                //为第一列添加数据
                td1.innerHTML = key;
                //创建第二列
                var td2 = document.createElement('td');
                //为第二列添加拼接的超链接数据
                td2.innerHTML = '<a href="' + datas[key] + '">' + key + '</a>';
                //将两个列追加到行中
                tr.appendChild(td1);
                tr.appendChild(td2);
                //将行追加到表格中
                tb.appendChild(tr);
            }
        }
    </script>
</head>
<body>
    <table id="tbList"></table>
</body>
</html>

2)使用insertRow()与insertCell()方法动态创建行列

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动态创建行列标签</title>
    <style type="text/css">
        #tbList {
            width: 500px;
            border: 1px solid blue;
            border-collapse: collapse;
            margin: auto;
        }

        tr, td {
            border: 1px solid blue;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        //页面加载完毕后执行
        window.onload = function () {
            //获取表格对象
            var tb = document.getElementById('tbList');
            //json格式的单元格数据
            var datas = { '360': 'http://www.360.cn', '百度': 'https://www.baidu.com', '腾讯': 'https://www.qq.com' };
            //使用for in 循环创建行列
            for (var key in datas) {
                //创建一行,-1表示追加的意思。
                var tr = tb.insertRow(-1);
                //创建第一列
                var td1 = tr.insertCell(-1);
                //添加数据
                td1.innerHTML = key;
                //创建第二列并为其添加数据
                var td2 = tr.insertCell(-1).innerHTML = '<a href="' + datas[key] + '">' + key + '</a>';
            }
        }
    </script>
</head>
<body>
    <table id="tbList"></table>
</body>
</html>

注意:ie6，ie7对appendChild("tr")的支持和IE8不一样;推荐使用insertRow与insertCell来代替第一种方法或者先为表格添加tbody标签再使用第一种方法(只对IE与谷歌浏览器测试,其他浏览器的兼容性需要自测)

## table

表格是一个网站很常用的元素，用以展示大量的数据。在处理表格时，通常会加入许多功能，如斑马线、选中高亮、固定表头、锁定列等等，本篇文章主要介绍如何单纯的使用css实现固定行或列的功能。

### 一般做法

大部分的网上介绍的实现方式，甚至部分ui框架如iview等都是通过三至四个表格组合，然后js处理同步滚动来实现，这样的好处是容易实现，pc端也不会出现什么问题。但是在手机端时，会有严重的不同步滚动现象，处理的不好时，甚至会出现错位等，体验非常不好。

### 本文做法

主要使用了二个css属性

* table-layout: fixed

* posotion: sticky

### table-layout

为了让表格呈现滚动效果，必须设定table-layout: fixed，并且给与表格宽度

```css

table {

table-layout: fixed;

width: 100%;

}

```

### position

固定表格的行列需要使用到`posotion: sticky`设定

sticky的表现类似于relative和fixed的合体，在超过目标区域时，他会固定于目标位置

**注意:** `posotion: sticky`应用于table时，只能作用于`<th>`和`<td>`，并且必须定义目标位置left / right / top / bottom来实现固定效果

```

thead tr th {

position:sticky;

top:0;

}

```

简单说明这两个属性后，我们首先建立一个带表格的html页面

```html

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr> <tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

```

css部分如下

```

<style>

div{

overflow:auto;

width:400px;

height:290px; /* 固定高度 */

border:1px solid gray;

border-bottom: 0;

border-right: 0;

}

td, th {

border-right :1px solid gray;

border-bottom :1px solid gray;

width:100px;

height:30px;

box-sizing: border-box;

}

th {

background-color:lightblue;

}

table {

border-collapse:separate;

table-layout: fixed;

width: 100%; /* 固定寬度 */

}

td:first-child, th:first-child {

position:sticky;

left:0; /* 首行在左 */

z-index:1;

background-color:lightpink;

}

thead tr th {

position:sticky;

top:0; /* 第一列最上 */

}

th:first-child{

z-index:2;

background-color:lightblue;

}

</style>

```

最后的效果如下：

### 注意

* z-index很重要，需要仔细设置，尤其是对于ios

* 如果是固定多列，每一列需要注意设置好left的值

* 自测时，手机端安卓与ios测试各测试了两台，均是可以的，但是测试的机型不全，需要自行多测试

在线咨询

上一篇：Web端文件上传从未如此简单，但却很强大-bootstrap-fileinput
下一篇：使用Jackson将JSON字符串转换为Java Map

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

excel2013行列如何转换

您的项目需求