近期公司让我修改一些之前的table标签写的页面，感觉对table相关的标签不是太熟悉，于是专门整理一下：

1、如果给td标签设置百分比宽度，比如有10列内容，我们却设置了每个单元格是30%的宽度，会是这样的效果，（单元格会紧着前面的达标宽度，后面的自适应）

那么如果给单元格设置固定宽度呢？（目前我在table外层套了个div，宽度为600px，table的宽度为100%）

我先在给每个单元格设置宽度为60px；

效果是每个单元格的宽度是平均分的

如果给单元格设置30px；（单元格依然是平均分的，设置的小宽度并没有起作用）

然后，将table标签的宽度设置为300px或则50%（外层元素为600px）；可见td的宽度还是平均分的，无论设置50px还是10px，效果都是平均分的；

从此可以得出结论，在td元素上设置固定宽度(px之类)的宽度是不生效的,设置百分比宽度会紧着达标。

那么我们经常会遇到这样的需求，要求自定义表格宽度，该怎么办呢,我们可以在单元格中都套一个div元素，

然后给这个div元素设置固定宽度，就可以把对应列的单元格撑开了，然后剩余的单元格还会按照剩余的宽度自适应宽度

代码如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table</title>

</head>

<style>

    td{

        vertical-align: middle;

    }

    th{

        vertical-align: middle;

    }

    .itd{

        width:30px;

        background: pink;

    }

</style>

<body>

    <div style="text-align:center;font-size:100px;font-weight:bold;">

        其它内容

    </div>

    <div style="width:600px;margin:50px auto;border:1px solid red;">

        <table border="1" style="width:100%;">

        <th align="center"><div class="itd">标题1</div></th>

        <th align="center"><div class="itd">标题2</div></th>

        <th align="center"><div class="itd">标题3</div></th>

        <th align="center"><div class="itd">标题4</div></th>

        <th align="center"><div class="itd">标题5</div></th>

        <th align="center"><div class="itd">标题6</div></th>

        <th align="center"><div class="itd">标题7</div></th>

        <th align="center"><div class="itd">标题8</div></th>

        <th align="center"><div class="itd">标题9</div></th>

        <th align="center"><div class="itd">标题1哈啊啊阿</0</th>

        <tr>

            <td align="left"><div class="itd" style="width:100px;">单元格</div></td>

            <td align="center"><div class="itd" >单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

            <td align="center"><div class="itd" style="width:100px;">单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

        </tr>

    </table>

    </div>

</body>

</html>

当然，如果我们设置的单元格的宽度，超过了table的宽度，那么内容就会从右边溢出，

这个没有办法，这个需要我们设计布局，不能让单元格的总宽度超出table的宽度！！

再来说一下，合并单元格colspan，和rowspan属性，这是在td或th标签上加的

下面来实验一下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table</title>

</head>

<style>

    td{

        vertical-align: middle;

    }

    th{

        vertical-align: middle;

    }

    .itd{

        width:30px;

        background: pink;

    }

</style>

<body>

    <div style="text-align:center;font-size:100px;font-weight:bold;">

        其它内容

    </div>

    <div style="width:600px;margin:50px auto;border:1px solid red;">

        <table border="1" style="width:100%;">

        <th align="center" colspan="2"><div class="itd">标题1</div></th>

        <th align="center"><div class="itd">标题3</div></th>

        <th align="center" rowspan="2"><div class="itd">标题4</div></th>

        <th align="center"><div class="itd">标题5</div></th>

        <th align="center"><div class="itd">标题6</div></th>

        <th align="center"><div class="itd">标题7</div></th>

        <th align="center"><div class="itd">标题8</div></th>

        <th align="center"><div class="itd">标题9</div></th>

        <th align="center"><div class="itd">标题1哈啊啊阿</0</th>

        <tr>

            <td align="left"><div class="itd" style="width:100px;">单元格</div></td>

            <td align="center"><div class="itd" >单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

            <td align="center"><div class="itd" style="width:100px;">单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

            <td align="center"><div class="itd">单元格</div></td>

        </tr>

    </table>

    </div>

</body>

</html>

效果

以上的操作几乎就能满足日常开发了

下面来简单总结一下表格的布局操作

1、表格中单元格的宽度是自动平均分配宽度的，如果想调整其中的某一列的宽度，在td中套一个div元素，给这个div设置宽度，将td撑开（设置td的宽度无效）

2、单元格的总宽度不能超出table的宽度，否则内容会向右溢出，所以布局时一定要设计好。

3、table的border属性有两个值，1或0,设置1，table和单元格都会出现边框，设置为0，table和单元格都没有边框，如果想设置table的边框，我们可以给table标签单独加css样式，

　　想给td加边框，可以单独给td加css样式。

4、控制th和td中的元素上下对齐，注意是元素上下对齐，可以给th或td加vertical-align：top/middle/bottom;

5、控制th和td中的元素左右对齐，注意也是元素左右对齐，可以给th或td的元素上加align属性，值为left/center/right;

6、合并单元格，用rowspan=“2”或colspan="数值",一定要注意，若果有合并单元格存在，一定要注意单元格的个数，否则会多出单元格

原生table表格的使用的更多相关文章

  1. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  2. 用echartsjs 实现散点图与table表格双向交互，以及实现echarts取自于table数据，和自定义echarts提示内容

    本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...

  3. 原生 table css实现操作按钮固定右侧及底部滚动 IE不会卡死

    需求的表格比较复杂(各种合并新增删除),elementUi的table组件无法满足需求,故而写了原生table,且与其他用了table组件的表格保持一致. 贴一下简单的代码,只实现操作按钮固定右侧以及 ...

  4. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  5. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  6. MiniUI动态添加table表格

    本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格 1.效果展示 ↓ 2.具体代码 <script type="text/javascript"> ...

  7. table表格宽度固定，同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  8. Bootstrap Table表格一直加载(load)不了数据-解决办法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...

  9. [js开源组件开发]table表格组件

    table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...

随机推荐

  1. Educational Codeforces Round 61 (Div.2)

    A.(c1=0&&c3>0)||(c1!=c4) #include<cstdio> #include<cstring> #include<algor ...

  2. 杭电1081 第二道 dfs题

    Problem Description 呃......变形课上Harry碰到了一点小麻烦,因为他并不像Hermione那样能够记住所有的咒语而随意的将一个棒球变成刺猬什么的,但是他发现了变形咒语的一个 ...

  3. Access-Control-Max-Age

    app.UseCors(builder => builder .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader() .AllowCreden ...

  4. 【转载】C#中使用OrderBy和ThenBy等方法对List集合进行排序

    在C#的List操作中,针对List对象集合的排序我们可以使用OrderBy.OrderByDescending.ThenBy.ThenByDescending等方法按照特定的对象属性进行排序,其中O ...

  5. Centos 配置eth0 提示Device does not seem to be present -- 转载

    http://www.cnblogs.com/fbwfbi/archive/2013/04/29/3050907.html 移动虚拟机造成网卡无法识别 一.故障现象: [root@c1node01 ~ ...

  6. Java 之 转换流

    一.字符编码和字符集 二.编码引发的问题 当我们使用 UTF-8 编码保存文件时,用 UTF-8 再次读取不会出现任何问题.但是,当使用其他的编码(如GBK)读取文件时,就会出现乱码现象. Demo: ...

  7. iOS 如何判断一个点在某个指定区域中

    在iOS 开发中会遇到 判断位置的情况 iOS 自己都有函数实现的这些功能. 判断一个点是否在这个rect区域中 bool CGRectContainsPoint(CGRect rect,CGPoin ...

  8. C#为什么要装箱和拆箱

    来自论坛4楼的回答非常棒,地址:https://bbs.csdn.net/topics/390624164?page=1 内容如下: 道理很简单,按理说C#被设计成一种完全面向对象的语言.因此,包括数 ...

  9. layui 添加

    {include file="Public:inner_header" /} <link rel="stylesheet" href="__ST ...

  10. vue框架之脚手架(vue-cli)的使用

    前期准备 1.在使用之前需要安装node.js,https://nodejs.org/dist/latest-v8.x/ 2.下载之后在cmd中测试 node -v npm -v 如图上即可 3.下载 ...