原生table表格的使用

近期公司让我修改一些之前的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表格的使用的更多相关文章

原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
用echartsjs 实现散点图与table表格双向交互，以及实现echarts取自于table数据，和自定义echarts提示内容
本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...
原生 table css实现操作按钮固定右侧及底部滚动 IE不会卡死
需求的表格比较复杂(各种合并新增删除),elementUi的table组件无法满足需求,故而写了原生table,且与其他用了table组件的表格保持一致. 贴一下简单的代码,只实现操作按钮固定右侧以及 ...
[转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
MiniUI动态添加table表格
本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格 1.效果展示 ↓ 2.具体代码 <script type="text/javascript"> ...
table表格宽度固定，同时td内容过长也不会被撑开
table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}
Bootstrap Table表格一直加载(load)不了数据-解决办法
bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...
[js开源组件开发]table表格组件
table表格组件表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...

随机推荐

如何判断当前修改过的datatable的某一列值是否为int型或double类型
如何判断当前修改过的datatable的某一列值是否为int型或double类型今天在做datatable数据验证时碰到要对datatable的列数据进行数据类型校验,因此记录一下本人校验的方法,如 ...
Django Rest framework的限流实现流程
目录一什么是throttle 二 Django REST framework是如何实现throttle的三 Django REST framework中throttle源码流程一什么是thr ...
进程间的通信—套接字(socket)
前面说到的进程间的通信,所通信的进程都是在同一台计算机上的,而使用socket进行通信的进程可以是同一台计算机的进程,也是可以是通过网络连接起来的不同计算机上的进程.通常我们使用socket进行网 ...
ABAP-JCO服务端连接问题
公司网络服务加域,若SAP服务器后端未配置端口号映射,则外部服务器注册JCO服务监听需要调整 # server jco.server.connection_count=5 jco.server.gwh ...
git 把其他分支上的文件拿来覆盖本地
1:git checkout oldversion -- 文件地址 2: 一个分支从某个角度讲也像是一次commmit,也是有向无环图的一个点
Bash基础——命令替换
参考:Linux 下Shell 脚本几种基本命令替换区别 Command substitution 命令替换Command substitution https://www.jb51.net/arti ...
iptables详解（2）表中规则管理（增删改查）
我们定义了四张表:raw表.mangle表.nat表.filter表,不同的表有不同的功能 filter表用来过滤,允许哪些ip.端口访问,禁止哪些ip.端口访问,表中会有很多链 ①禁止ip地址访问我 ...
3星|路骋《用得上的商学院》：100个MBA知识点的简单介绍
作者在序言中说,放弃了上亿的股票期权去念了两年全脱产的清华-MIT Global MBA.念完后认为课程不错,考虑到这种课本科毕业不能直接念,工作几年后又很难脱产来念,因此办了一个音频课程来讲这个MB ...
linux网络编程之socket编程(六)
经过一个国庆长假,又有一段时间没有写博文了,今天继续对linux网络编程进行学习,如今的北京又全面进入雾霾天气了,让我突然想到了一句名句:“真爱生活,珍惜生命”,好了,言归正传. 回顾一下我们之间实现 ...
Docker那些事儿之镜像创建
之前已经了解了docker的基本使用方式,简单的上手,也能让大部分人了解到这个技术的使用方法,今天继续说明docker如何构建自己所需要的镜像,开发人员掌握使用基础即可,有兴趣的可以自行深入研究前言 ...

原生table表格的使用

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

随机推荐

热门专题