关键词：
题目虽然是说table的宽度，但其实最让人抓狂的是单元格td的宽度。平时开发中也经常会遇到这方面的问题，所以我找资料学习table的宽度的算法。
table-layout
table-layout定义了表格布局算法，值为auto或fixed。
fixed
采用固定表格布局算法对表格布局。表格的宽度有width决定，列的宽度有首行单元格的width决定。
先上一个demo。
分析一下，这里table计算宽度为200px，第一列的计算宽度为100px，第二列计算宽度为20px，第三列和第四列的计算宽度为33px。第三列和第四列的宽度是由table
宽度减第一列和第二列宽度之和以及单元格左右border宽度，再除以2得到。也许你会问，为什么“1-3”所在td不是定义了width吗？为什么第三列是计算得到的？答：因为定义了width的td不位于首行，th才是位于首行。
规则
如果设置了列元素（col），列元素的width被设置为列的宽度。demo
列元素的width为auto，或者没有设置列元素（如第一个demo），首行单元格的width将被设置为所在列的宽度。
如果不符合以上两种情况，则由浏览器计算确定。
auto（默认值）
采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容（还是可以为单元格设置width的）。
规则
-
计算最小单元格宽度
1.1 计算每个单元格的最小内容宽度：内容可以流入多行，但不能超出单元格。
1.2 如果单元格的width值大于最小可能宽度，则最小单元格宽度为单元格的width值。
1.3 如果单元格的width值为auto，则最小单元格宽度为为最小内容宽度。
计算最大单元格宽度：完全显示内容且不换行（不考虑显示换行）时所需的宽度
计算最小列宽：该列中所有单元格的最小单元格宽度的最大值
计算最大列宽：该列中所有单元格的最大单元格宽度的最大值
如果单元格跨列，最小列宽之和必须等于这个跨列单元格的最小单元格宽度。最大列宽必须等于这个单元格的最大单元格宽度。
demo
其他
但table的width为auto时，即使table-layout为fixed，都会采用自动布局算法。demo
参考
W3C CSS2.1中文文档
MDN
CSS权威指南
本文转载于:猿2048?https://www.mk2048.com/blog/blog.php?id=hhb1h1jchbb
elementui的table在ie下宽度不能100%显示的问题(代码片段)
加上两行代码就行：.el-table__headerwidth:100%!important;.el-table__bodywidth:100%!important; 查看详情
elementui,el-table固定列，自适应高度，自适应宽度(代码片段)
elementui,el-table固定列，自适应高度，自适应宽度效果 自适应宽度 style="width:100%" <el-table :data="companyList" border style="width:100%" :height& 查看详情
table标签自适应及常用相关配置(代码片段)
...代码贴在最后实现效果，表头th标签定宽，后面内容实现宽度自适应，平均分配；当内容超出时用省略号隐藏超出部分；鼠标hover于内容上时换行显示内容（但应当注意行高和横向滚动条）table-layout:fixed;table-layout:fixed;/*该项配置... 查看详情
在开发中使用el-table宽度不一致出现抖动问题(代码片段)
1.问题点击来回切换时，由于表格列数不一样，会出现抖动的情况2.源代码<template><divclass="check-list"><sectionclass="fbetween"><div><el-radio-groupv-model="type& 查看详情
table开发中遇到的问题(代码片段)
...超出部分文字用省略号代替*/text-overflow:ellipsis;2.设置表头宽度，直接设置th的宽度是无效的，因为它是基 查看详情
jqgrid序号列宽度调整(代码片段)
//遍历jqgrid使其序号列宽度为45functionsetwidth()$("table[role=‘grid‘]").each(function()//jqgrid创建的表格都有role属性为grid$(‘.‘+$(this).attr("class")+‘tr:firstth:first‘).css("width","45");//使表头的序号列宽度为40$(‘.‘+$(this).a 查看详情
antd的table组件设置column的width列宽度不生效问题(代码片段)
...数字和长单词）破坏表格布局的问题（即使你指定了列的宽度也会被挤开），之前组件内默认加过word-break:break-word;去纠正此类布局，又会引起其他的问题。所以最好的解决方案可能还是不默认breakword，提供一个属性来针对某些... 查看详情
table--边框样式设置(代码片段)
table的两个属性单行溢出点点显示表格的宽度设置双栏自适应连续连续英文符换行1、table重置的两个属性：①border-collapse:collapse; /*为表格设置合并边框模型*/②border-spacing:0; &nb... 查看详情
在开发中使用el-table宽度不一致出现抖动问题(代码片段)
1.问题点击来回切换时，由于表格列数不一样，会出现抖动的情况2.源代码<template><divclass="check-list"><sectionclass="fbetween"><div><el-radio-groupv-model="type"@change="(value)=>h... 查看详情
hexo(代码片段)
...独占一行，在所在父元素内依次向下排列，从左上角开始宽度和高度在不设置的情况下，宽度继承父级元素内容的宽，高度有本身内容决定可以直接设置盒子模型的所有属性（widthheightpaddingbordermargin）可以嵌套其他元素p，dt，h1-... 查看详情
table表格列顺序拖拽和列宽度拖拽
目前项目要求对表格可进行宽度拖拽和排序拖拽。用的第三方库库ant-desigin-vue。对于列宽度拖拽在ant-desigin-vue的table示例中有对应的案例，但是直接复制代码，会报错。最后看了源代码，对案例代码进行了修改。安装第三方库npmi... 查看详情
css控制table的td宽度
今天发现即使设置table的td、th宽度，仍是不管用，是根据table的td的内容来适应宽度，导致其他的th、td丢失。下图就是浏览器渲染的table，导致缺失“端口”这一列，因为“设备名称”中的td内容太长导致。代码： <tablewidth=... 查看详情
封装ul组件，使用这个element组件库table相关操作，drawer抽屉基本用法，elementtable表格选中事件。传参问题。elementui中的input修改宽度(代码片段)
封装ul组件，使用这个element组件库Table相关操作，elementtable表格选中事件封装ul组件例如这个UI组件的两个按钮操作，现在需要将他们进行封装。一般来说是这个先将组件库怼上去，然后按照自己的想法去封装一个... 查看详情
colgroup中col定义表格单元格宽度(代码片段)
colgroup中可以使用col来定义表格单元格宽度，可以使用像素（数字），百分比，我们来具体看看有什么不同。 先看一个最基本的：用像素（数字）表示，因为table有个宽度，这里表示占比<html><body><tablewidth="1000... 查看详情
html表格宽度设置失效
问题描述：我在写一个网页table时，table宽度超过了我预想的宽度，我想把它设置小一点，但总是没效果。改到怀疑人生！代码如下：经过多次调试后发现一个问题，table可以改变大小，但是会有一个最小值，低于最小值时，数值... 查看详情
在css网页里设成宽度为100%全屏，但网页里的table里宽度又怎么设置了？table宽度不会随着屏幕变化而变化？
...面，此时无论网页大小如何变化，table总能占用网页70%的宽度，可以实现随着屏幕变化而变化。参考技术A需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基... 查看详情
react-bootstrap-table 宽度有问题
】react-bootstrap-table宽度有问题【英文标题】：Troublewithreact-bootstrap-tablewidth【发布时间】：2018-02-1017:00:54【问题描述】：我使用react-bootstrap-table并且需要垂直滚动。我的代码：<BootstrapTabledata=productshover><TableHeaderColumnisKeydataF... 查看详情
html中，如何固定table单元格宽度？
在一行中,td宽度依次为3%,150px,3%,500px,3%,150px,3%,剩余。可是这样弄完之后，效果根本不是这样，那个px宽度的它会自动调整，请问怎么让他按设置的宽度显示？1、首先我们打开我们的myeclipse获取idea这样的编辑器，然后在编辑器中... 查看详情