近期公司让我修改一些之前的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. Synergy 一套键鼠同时控制多台电脑

    百度云(1.5是最后一个免费的版本,linux,mac,windows全有): 链接: https://pan.baidu.com/s/1A_qR8FHd8a0ILQXsSqjfCQ 密码: 9h8c

  2. Spring BeanFactory 与 FactoryBean 的区别

    BeanFactory 和 FactoryBean 都是Spring Beans模块下的接口 BeanFactory是spring简单工厂模式的接口类,spring IOC特性核心类,提供从工厂类中获 ...

  3. C# Aforge设置摄像头视频属性和控制属性

    修改后的代码:github 一.调用windows自身摄像头属性设置窗口 使用VideoCaptureDevice对象的DisplayPropertyPage(IntPtr parentWindow) ...

  4. BPM业务流程管理系统_K2受邀出席QAD客户日活动，赋能企业云端智造_工作流引擎

    10月17日,K2受邀参加由厦门易维主办的以“走进QAD云ERP,深耕智能制造”为主题的QAD客户日活动.本次大会是以工业4.0背景下传统制造业面临巨大压力和挑战为导向,旨在探讨如何助力企业迅速适应业 ...

  5. 苹果APP内购客户付款成功，没收到相应虚拟产品的解决办法

    一.引导用户走申请苹果的退款 1.告知用户新版本可以使用支付宝.微信支付,更划算 2.苹果可申请90天以内的退款,一般情况申请后48小时内就有反馈. 参考链接 https://jingyan.baid ...

  6. shell 文本处理三剑客之 grep 和 egrep

    shell 三剑客之 grep 命令语法格式 grep 参数 案例 显示file中有python的行 grep python file 显示没有python的行,不忽略大小写 grep -v pyth ...

  7. Linux之virtualenv和virtualenvwrapper

    一,介绍 在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题:亦或者是在开发过程中不想让物理环境里充斥各种各样的库,引发未来的依赖灾难.此时,我们需要对于不同的工 ...

  8. linux网络编程之socket编程(六)

    经过一个国庆长假,又有一段时间没有写博文了,今天继续对linux网络编程进行学习,如今的北京又全面进入雾霾天气了,让我突然想到了一句名句:“真爱生活,珍惜生命”,好了,言归正传. 回顾一下我们之间实现 ...

  9. 使用springboot和easypoi进行的数据导出的小案例

    在这个案例中使用的有springboot和easypoi进行数据导出到excel中 yml文件是这样的: server: port: 8080 spring: datasource: url: jdb ...

  10. SHELL编程基础01

    首先shell是在linux下运行的一种环境,它是以shell脚本来运行的,学会了它基本可以解决任何问题,也可以用shell脚本开发. 和java,python的相比,其弱类型的语言没有那么复杂的结构 ...