精华内容
下载资源
问答
  • 题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设置还不起作用。...

    题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设置还不起作用。。。。。脑瓜疼啊!脑瓜疼~~~废话说了一堆,撸起袖子继续干吧!

    首先定义一个基础的table

    table tr td{

    background: #cde8e5

    }

    123

    显示效果:

    注意:蓝色部分不是边框,而是table的露出来的背景色,原因是浏览器自带样式border-spacing: 2px;每个单元格之间默认有2px的间距;

    为了方便查看,保留样式。接下第一个单元格改为“11”,如图所示:

    因为:第一个单元格的“11”是2个字符宽带,第二个单元格“2”是一个字符宽带,第三个单元格“3”是一个字符宽带。

    共计是4个字符宽带,因此,比例为 2:1:1. 所以 第一个单元格是:600*2/4=300px. 第2和第3都是 600*1/4=150px宽度(准确宽度方便阅读,忽略掉单元格间距影响~,以下同)

    如果长度很长,超过表格宽的的情况会撑大表格宽度,如图所示:

    要想表格宽度不被撑大,单元格自动换行,可以用word-break: break-all;试试

    第一个单元格50个“1”,第二个单元格25个“2”,他们的宽度比为2:1

    总之,一个结论:如果不设置td宽带,各单元格会根据各个内容长度的比例来均分table的宽度。

    2、定义表格宽度为600px;第一个与第二个单元格,宽度和大于600px的情况下

    111111111111111111111111111111111111123

    如图所示:

    细心的朋友肯定会想到,两个400px,单元格宽度是1:1,那一个800px,会不会就是2:1呢,答案是肯定的

    111111111111111111111111111111111111123

    如图所示:

    3、如果td宽度不足,则不足会自动补齐。下图中,第一个100px,第二个100px,第二个td自然是:600-100-100=400px

    123

    如图所示:

    4、百分比和数字同时使用,百分比优先级高,废话不说,上代码

    123

    5、td定义的宽带是默认宽度,实际宽度由内容决定。代码示例:

    1
    23

    如图所示:

    如果td不想被里面的内容div撑大,那么给table设置样式table-layout: fixed;,就会严格限制表格定义的支持

    展开全文
  • 我的桌子宽度为100%,如何根据文本长度自动宽度设置TD和TR?我使用width:自动,但是不起作用.这是我的代码:.hoverTable {width: 100%;border-collapse: collapse;}.hoverTable td {padding: 7px;border: #4e95f4 1...

    我的桌子宽度为100%,如何根据文本长度自动宽度设置TD和TR?我使用width:自动,但是不起作用.这是我的代码:

    .hoverTable {

    width: 100%;

    border-collapse: collapse;

    }

    .hoverTable td {

    padding: 7px;

    border: #4e95f4 1px solid;

    }

    /* Define the default color for all the table rows */

    .hoverTable tr {

    background: #b8d1f3;

    }

    /* Define the hover highlight color for the table row */

    .hoverTable tr:hover {

    background-color: #ffff99;

    }

    .hoverTable th {

    background: #b8d1f3;

    }

    Some Text here
    This is text length example and textItem 1BItem 1C
    Item 2AItem 2BItem 2C
    Item 3AItem 3BItem 3C
    Item 4AItem 4BItem 4C
    Item 5AItem 5BItem 5C

    正如您在“这是文本长度”示例中看到的那样,并且文本的宽度不是基于文本长度的,我如何才能基于文本长度来设置宽度.

    我的意思是基于文本长度的自动宽度?

    谢谢

    解决方法:

    使用以下内容:

    .hoverTable {

    border-collapse: collapse;

    }

    因此,只需删除宽度:100%;它会工作.该表现在将动态呈现.

    标签:css,html,javascript

    来源: https://codeday.me/bug/20191119/2036635.html

    展开全文
  • table的宽度是自适应的,而且部分TD是固定宽度。原则上应该讲table的宽度设置成一个固定的值,而不应该设置成一个根据屏幕变化的值。现在来看下如何设置表格td单元格的宽度。例1:Table的宽度为600px,Table的td所有...

    5268f80b9b1e01f982625ef6fac83ca1.png

    table的宽度是自适应的,而且部分TD是固定宽度。原则上应该讲table的宽度设置成一个固定的值,而不应该设置成一个根据屏幕变化的值。现在来看下如何设置表格td单元格的宽度。

    98d536729eeeb01f56fba33291a9641e.png

    例1:Table的宽度为600px,Table的td所有宽度总和不到600px,浏览器会自动按照td的宽度的比例算出宽度

    我是200px我也是200px

    运行结果:两个td都是300px;

    Table的宽度为600px,前两个td的宽度已经为600px,那么第三个td的宽度没有指定,这样的话第三个td的宽度是根据内容出现宽度的,然后前两个再按照比列计算宽度。

    例2:前两个td小于table宽度,那么最后一个td就起到补全的作用

    我是200px我也是200px我是根据内容的

    例3:Table中的td内,如果放置块状元素超过td的宽度,并且table的table-layout: fixed;(fixed表示td的宽度是定长的,不随td内容变化而变化)。这样尽量不要再td里写overflow: auto; 因为这样在IE6,7不会出现滚动条的,最好的办法是套一个div,宽度设置成100%

    我是自由宽度

    1a92108bca7de8b51d5e127d13dd4215.png

    展开全文
  • 展开全部给table设置一个mian...} .main td的意思是指定32313133353236313431303231363533e58685e5aeb931333365653165main类下的td,同理也可以指定tr这样的做法只能针对了设定main类的表格,若是想要所有的表格都是...

    展开全部

    给table设置一个mian

    代码如下

    .main td{ height:30px; border:#CCCCCC 1px solid;}

    .main td的意思是指定32313133353236313431303231363533e58685e5aeb931333365653165main类下的td,同理也可以指定tr

    这样的做法只能针对了设定main类的表格,若是想要所有的表格都是同一个高度样式可以这样写

    table td{ height:30px; border:#CCCCCC 1px solid;}

    注意的是table前不要加点,因为他不是类名,而是html元素

    关于html中table表格tr,td的高度和宽度

    1、table中的width和height设置及其作用:table中设置的height其实是设置个最小值,也就是当表格中的内容或者行高总值超过这个设置值时,会自动延长表格的height值,当表格中的内容或者行高没有达到这个值时,会自动扩大到这个值。table中设置的width值一般为表格宽度的最大值,不能改变,即使内部的内容宽度超过也不能改变。(这个内部内容如果是图片的话是可以改变表格宽度的。)

    2、tr标签中width和height设置及其作用:tr标签里面的width设置不起任何作用,因为从第一点可以看出,表格的width是不能改变的,tr标签当然就不起作用了。所以在tr中只有讨论height设置的可能了,tr中的height设置和几个tr之间的设置有关。

    当几个tr都设置了height的具体数值时,各个tr的height按照设置的值的比例来分配总的height值,注意这里说的是总的height值。

    当几个tr都没有设置height具体值时,平均分配总的height值。当有的tr设置了具体的数值,有的没有设置具体的数值为默认时,先保证各个tr的基本需要,剩下的再满足设置了具体值的tr,之后再全部给没有设置具体值的tr。

    最后一种情况还要考虑总的宽度不够tr总的设置值的情况,不够的话要满足tr的基本需要,这里会自动延长表格的height的。然后再考虑设置了height的tr,最后考虑没有设置height的tr。

    3、td标签中width和height设置及其作用:td标签里面的width和height都是起作用的。先看td的width吧,某一个td的width是和所处的一列每个td的width都相关的,取其中最大的width作为这一列中每个td的width,这点是让我们最混淆的地方,一定要从全局把握某个td的width,不能从这一个的width设置就断言它的宽度就是多少,这样是不准确的。

    展开全文
  • 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题。首先,来分析一下这三个标签中height和width的区别: 1、table中的width和height...
  • table设置宽度后无效

    2020-02-29 14:01:27
    问题: 在使用table布局时发现设置了td的...td是一个tr的一部分,首先要注意每个td相加后的宽度是否和table的宽度一致,若不一致浏览器无法识别有效设置值。 其次,设置表格css样式的一个属性table-layout:fixed; ...
  • 如果table按照百分比设定宽度和高度,当表格内部任意内容超出所在元素的百分比值时就会使得表格变形。 内容超过50% 当内容超过50%时,就会使Table变形。此时只需在table标签上设置style=''的table-layout:...
  • 场景说明: 1,当table的展示列很多时,往往希望用户可以动态设置显示或者隐藏部分列。...4,当tr是分组行时,展开的下一个tr可能只有一个td,这个时候会发现,两个tr格式不对称(colspan属性)你再次
  • content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> table 北京 期望效果如下(已用flex布局实现) “北京”处宽度自适应 然后右边的icon固定宽度16px,...
  • 经常会遇到table、tr、td标签的width和height问题,而有时候发现在对tr、td设置宽度或高度时没有效果,其实这就是表格标签的特殊性,他们几个互有联系,互有制约,例如table的宽度限制了tr宽度,table的高度又受tr...
  • <table border="1px" style="table-layout: fixed"&...tr> <th width="100px">1</th> <th width="100px">2</th> <th width="100px">3</th> </tr> <tr> .
  • layui的table表格修改tr,td的长宽

    千次阅读 2018-09-10 15:24:18
    修改table的中列行的长宽发现直接tr,td中style="width:10px"不起效果 ,后无意看到一篇博客里写需要在table里加table-layout:fixed这样修改才有效果,这时再修改colgroup内col的width才可生效 ...
  • 使用Vue实现拖动改变元素宽度的方法发布时间:2020-11-05 17:06:52来源:亿速云阅读:127使用Vue实现拖动改变元素宽度的方法?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这...
  • bootstrap table 怎么自适应宽度

    千次阅读 2019-09-29 22:03:26
    <div class="table-responsive"> <table class="table text-nowrap"> <thead> <tr> <th> ... </th> .... ...
  •   解决方法是: 如果你使用的百分比设置的TABLE的高度或/和宽度,那么也一定要使用百分比的方式设置TD和TR的高度或/和宽度。   参见: <br />CSS中设置表格TD宽度的问题集 ...
  • 设置了table的display:block会导致这种情况,删了就好了;或者设置table的display:table 原文链接:http://blog.csdn.net/minzhang001/article/details/53186328
  • vue修改th表头高度,宽度等问题

    千次阅读 2020-08-21 19:48:36
    el-table修改表头 表格 <el-table v-loading="loading" :data="preventionList"> <el-table-column label="业务工作" align="center" prop="businessWork" />...el-table-column label="责任人" align=...
  • 解决table设置宽度无效的问题

    万次阅读 2017-03-20 14:30:53
    解决table设置宽度无效的问题
  • 在table中,如果在tr加上display样式时,会发生错乱如下: fa fa Gold Level Virtual Server 已完成 haha Platinum Level Virtual Server 正在执行 aha Hardware Switch 已完成 效果如图: ...
  • 固定table中的TH的高度和TD的宽度

    千次阅读 2019-01-11 16:31:38
    要求修改一个TH和TD的高度和宽度。 但是height和width怎么都不能用,对table进行设置也不可用。 于是找了一些资料,顺利将问题解决。 只需要给table进行设置: style="table-layout: fixed;" 只要对...
  • jQuery实现表格td宽度等于th宽度

    千次阅读 2016-02-28 22:54:13
    &lt;table style="width:100%; " id="tblHeader" class="...tr style="background:#E7E7E7;color:#101010;"&gt; &lt;th style="width:135px
  • table 中使用了display:blok; 将替换成display:table 或 去掉该属性
  • 哎!纠结了将近一上午的html问题终于有点眉目了,有发现了html一个比较变态的机制。   ...就是说有一个表格1000宽度,里面呢有3个格子,宽度分别是10、20、10!哎!。。。是的没写错,3个td加起来不等于table!
  • 针对微信小程序画table .tr{ display: flex; } .td{ flex-shrink: 0; width: 200rpx; } 4、换行平分比如一行三个显示两行 .product-list{ display: flex; flex-wrap: wrap; justify-content: start; position: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 75,316
精华内容 30,126
关键字:

tr宽度