精华内容
下载资源
问答
  • 题外话:一直以来习惯布局用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;,就会严格限制表格定义的支持

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

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

    首先定义一个基础的table

    <style>
      table tr td{
        background: #cde8e5
      }
    </style>
    <table style="width:600px; background-color:blue">
       <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
       </tr>       
     </table>
    

      显示效果:

    注意:蓝色部分不是边框,而是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的情况下

    <table style="width:600px; background-color:blue;">
       <tr>
         <td style="width: 400px">1111111111111111111111111111111111111</td>
         <td style="width: 400px">2</td>
         <td>3</td>
       </tr>       
     </table>
    

      如图所示:

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

    <table style="width:600px; background-color:blue;">
       <tr>
         <td style="width: 400px">1111111111111111111111111111111111111</td>
         <td style="width: 800px">2</td>
         <td>3</td>
       </tr>       
     </table>
    

      如图所示:

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

    <table style="width:600px; background-color:blue;">
       <tr>
         <td style="width: 100px">1</td>
         <td style="width: 100px">2</td>
         <td>3</td>
       </tr>       
     </table>
    

      如图所示:

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

    <table style="width:600px; background-color:blue;">
       <tr>
         <td style="width: 400px">1</td>
         <td style="width: 400px">2</td>
         <td style="width: 50%">3</td>
       </tr>       
     </table>
    

      

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

    <table style="width:600px; background-color:blue;">
       <tr>
         <td style="width: 200px"><div style="width: 400px;">1</div></td>
         <td>2</td>
         <td>3</td>
       </tr>       
     </table>
    

      

    如图所示:

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

    转载于:https://www.cnblogs.com/vicky-li/p/10443751.html

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

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

    b6791a5f5c3992fd192db700901baa8f.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%

    我是自由宽度

    ea8f02aaf7d711b1037fe92c376c56d6.png

    展开全文
  • 关于html中table表格tr,td的高度和宽度

    千次阅读 2018-10-30 20:56:50
    title: 关于html中table表格tr,td的高度和宽度 date: 2018-10-30 20:52:47 tags: [布局] categories: 布局 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到...

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

    做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题。首先,来分析一下这三个标签中height和width的区别:

    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设置就断言它的宽度就是多少,这样是不准确的。

    当我们把每一列的宽度都弄清楚之后,事情就好办了。这时候各个td之间的宽度分配按照第二条中各tr的height分配规律,

    有一点不同的是全部是默认的情况下,各td的width不是平均分配,而是根据各自的实际内容按比例分配。

    再看看td的height设置吧,各个td的height要看这个td所在的行的最大高度来确定这一行的每个td的height,然后各个行的高度情况和tr中的height分配原则是一样的。

    还有一点要注意,就是td的height和tr的height之间的关系。首先肯定是根据内容的需要,在这个基础上,再根据设置的值来确定,哪个设置的值大就按照哪个,如果一个设置了值一个没有设置值,那么按照设置值的算。

    展开全文
  • document.getElementById("tr_a").style.display="table-row"; document.getElementById("tr_b").style.display="none"; 更多的去看 W3c
  • 加上这一样式即可 &lt;style type="text/css"&gt; table { table-layout:fixed;word-break:break-all; ...固定每个tr的高度 table tr{ height: 40px; }   参考:ht...
  • 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题。首先,来分析一下这三个标签中height和width的区别:  1、table中的width和height设置及其作用: table中设置的height...
  • 如果你的TABLE是使用CSS设置的高度...如果你使用的百分比设置的TABLE的高度或/和宽度,那么也一定要使用百分比的方式设置TD和TR的高度或/和宽度。 参见: CSS中设置表格TD宽度的问题集 http://www.syscy.co...
  • <tr> ;">111rrrrrrrrr111111111rrrrrrrrrrr <td>333333333333333333333333333 </tr> </tabl
  • http://wenku.baidu.com/link?url=76BZcBS3YyA1QJwE7pCPJKERPex4uSQEQ1LI5ZkwTCtunw2cBTaLI8E71dxUhFW0CH4hgEm4mROlLtK4X-XLltqCA4tVQppo5OeBP_A5bLG 转载于:https://www.cnblogs.com/mrxiaohe/p/5217815.html
  • ——table的宽度是自适应的,而且部分TD是固定宽度。原则上应该讲table的宽度设置成一个固定的值,而不应该设置成一个根据屏幕变化的值。现在来看下如何设置表格td单元格的宽度。——各位小伙伴在进阶的时候总会遇到...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head>...table style="table-layout:fixed" width="300px"...
  • ——table的宽度是自适应的,而且部分TD是固定宽度。原则上应该讲table的宽度设置成一个固定的值,而不应该设置成一个根据屏幕变化的值。现在来看下如何设置表格td单元格的宽度。——各位小伙伴在进阶的时候总会遇到...
  • tr&gt;&gt;&lt;td&gt;的宽度和高度 给table设置一个mian 代码如下 &lt;style type="text/css"&gt; .main td{ height:30px; border:#CCCCCC 1px solid;} &lt;/style&...
  • table-layout:fixed 属性的解说 ...例3:(IE\Firefox浏览器)固定宽度使多余内容隐藏 方法:在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div (一行两列)
  • 如果table按照百分比设定宽度和高度,当表格内部任意内容超出所在元素的百分比值时就会使得表格变形。 <table width='80%'> <tr> <td width='50%'>内容超过50%</td> </tr> </...
  • 这个网页前面代码不是我写的, 现在让我修改, 把开头部分的宽度改为100%, 由于是用<tr><td><tabble>写的 我一点头绪都没有,求大神帮忙看看!!!!! <!DOCTYPE ...
  • 场景说明: 1,当table的展示列很多时,往往希望用户可以动态设置显示或者隐藏部分列。...4,当tr是分组行时,展开的下一个tr可能只有一个td,这个时候会发现,两个tr格式不对称(colspan属性)你再次
  • 展开全部给table设置一个mian...} .main td的意思是指定32313133353236313431303231363533e58685e5aeb931333365653165main类下的td,同理也可以指定tr这样的做法只能针对了设定main类的表格,若是想要所有的表格都是...
  • 如果table按照百分比设定宽度和高度,当表格内部任意内容超出所在元素的百分比值时就会使得表格变形。 &lt;table width='80%'&gt; &lt;tr&gt; &lt;td width='50%'&gt;内容超过50%&lt...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,425
精华内容 570
关键字:

tr宽度