近期公司让我修改一些之前的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. vmware vSphere Data Protection 6.1 --------1-部署

    一.简介 1.vdp的介绍 介绍可以参考:vmware vSphere Data Protection简述(未完成) 官方中文文档:https://docs.vmware.com/cn/VMware- ...

  2. Golang官方log包详解

    Golang官方log包详解 以下全是代码, 详解在注释中, 请从头到尾看 // Copyright 2009 The Go Authors. All rights reserved. // Use ...

  3. SQL case when 遇到null值

    case  when f.FPH is  NULL then a.HSJE else f.KPHSJE  end    yes case f.FPH  when   NULL then a.HSJE ...

  4. python day3 int,str,list类型补充

    目录 python day 3 1. int类小知识点 2. str类小知识点 3. list类小知识点 python day 3 (学习资料来自老男孩教育) 2019/10/06 1. int类小知 ...

  5. S5PV210 启动流程

    S3C6410启动流程 首先,看一下S3C6410启动流程 ① iROM supports initial boot up : initialize system clock, D-TCM, devi ...

  6. javascript_06-控制流程

    流程控制 程序的三种基本结构 顺序结构 选择结构 循环结构 判断语句 if 语法: if(condition){ //todo }else if{ //todo }else{ //todo } var ...

  7. DB2新建编目及删除编目

    场景:在添加一个新数据库的连接时,需要先建立此数据库的编目信息 新建: 1.获取数据库IP.端口.数据库名称 2.打开DB2客户端的“DB2命令窗口” 3.按以下命令执行 db2 catalog tc ...

  8. 【转载】linux如何将新硬盘挂载到home目录下

    举例说明: 新增磁盘的设备文件名为 /dev/vdb 大小为100GB. #fdisk -l 查看新增的的磁盘 1.对新增磁盘进行分区 #fdisk /dev/vdb 按提示操作 p打印 n新增 d ...

  9. 解决mybatis实体类和数据库列名不匹配的两种办法

    我们在实际开发中,会遇到实体类与数据库类不匹配的情况,在开发中就会产生各种各样的错误,那么我们应该怎么去解决这一类的错误呢?很简单,下面我们介绍两种解决方法: 首先我们看一下数据库和实体类不匹配的情况 ...

  10. JavaScript函数封装调用

    举个列子:我们在写前端页面,经常会使用到Jquery文本框内容,来判断一下输入值是否符合,常见的写法: <script> function test(){ $("#ID" ...