`
yxc_gdut
  • 浏览: 96894 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

table设置td宽度的浏览器差异

    博客分类:
  • html
阅读更多

先看看浏览器生成table差别。

 

<!DOCTYPE HTML>
<html>
  <head>
    <title>table.html</title>
    <meta http-equiv="content-type" content="text/html; charset=GB18030">
    <style type="text/css">
    	body{padding:1px;margin:1px;}
    	table{background-color:#aaa;margin-bottom:10px;}
    	td{padding:0px;margin:0px;background:white;}
    	tr{height:20px;}
    	.w_100{	width:100px;}
    	.w_200{width:200px;}
    	.w_500{width:500px;}
    	.content_width{width:500px;height:18px;}
    </style>
  </head>
  <body>
    <table width="100%" cellspacing=1>
    	<tr>
    		<td colspan="4" ><div class="content_width"></div></td>
    	</tr>
    	<tr>
    		<td colspan="1"></td>
    		<td colspan="3"></td>
    	</tr>
    	<tr>
    		<td class="w_100"></td>
    		<td class="w_200"></td>
    		<td class="w_100"></td>
    		<td></td>
    	</tr>
    </table>
  </body>
</html>

 

 

 

我想要的是这样的table,chrome、firefox、opera中表现是所期待的



 
 

IE8中,浏览器会先确定table的最小宽度,然后按比例增大其他行的td,不论td是否设置了宽度


 

 

生成表格之后,IE8 chrome firefox opera改变浏览器窗口大小,IE8 chrome firefox opera 表现一致,都只会影响没有设置宽度的td,而不会影响设置了宽度td,除非是最后一个td(贴着table右边的那个td)。
 

现在来看下IE6/7的表现



 
 在生成table的方式和IE8一样,但是浏览器窗口缩放表现不一致

table整体都会随着浏览器窗口缩放,无论td是否设置了宽度



 

但当我将table的第一行的那个td设置width属性的时候

 

<td colspan="4" class="w_100"><div class="content_width"></div></td>

 浏览器缩放表现和IE8一样,这可能是IE8对IE67的一些改进(添加width属性对IE8没有影响)



 

暂时到这,如果有问题希望您能指出来,谢谢。

  • 大小: 74.9 KB
  • 大小: 65.6 KB
  • 大小: 75.5 KB
  • 大小: 60 KB
  • 大小: 30.3 KB
  • 大小: 34 KB
分享到:
评论

相关推荐

    Jquery table固定表头,固定列,全浏览器兼容

    此外,为了解决表格单元格(td)的宽度不一致问题,可以设置 `table-layout: fixed`。 5. **AutoFixTable**:这个文件名可能是项目或库的名字,它可能包含实现上述功能的代码或者一个插件。使用这样的工具可以简化...

    td单元格合并时 td宽度问题

    总结来说,td单元格合并后宽度问题主要是因为在不同浏览器中对表格渲染的差异造成的。通过上述两种方法,可以较好地控制和修正在Internet Explorer等浏览器中单元格宽度问题。需要注意的是,随着现代浏览器对标准的...

    td/td标签的border 样式在浏览器中显示不出来的解决方法

    然而,一些较旧或者兼容模式下的浏览器可能由于解析机制的差异,导致在处理无内容的`&lt;td&gt;`标签时出现异常,使得边框样式无法生效。 为了解决这个问题,我们可以采取一种巧妙的方法。在空的`&lt;td&gt;`标签内部添加一个不...

    ie8,chrome中table的宽度固定方法

    `table-layout: fixed`这个CSS属性用于设定表格的布局算法,当设置为`fixed`时,表格的列宽会根据`&lt;th&gt;`(表头)或`&lt;td&gt;`(单元格)的`width`属性预先计算并固定,而不受表格内容的影响。`width: 100%`则意味着表格...

    table自动拉伸在chrome与IE中的兼容性问题解决

    例如,当table宽度不是td宽度的整数倍时,如增加或减少的像素值不是td数量的公倍数,A类浏览器会根据原有比例分配额外的像素,而B类浏览器则会均匀分配,导致实际显示效果的细微差别。 为了解决这个问题,开发者...

    table拖动交换表格内容

    总之,"table拖动交换表格内容"是一个涉及到多方面技术的前端开发任务,包括HTML、CSS和JavaScript的综合运用,以及对浏览器差异性的理解和处理。在实际开发中,我们还需要考虑到性能优化、无障碍访问(A11Y)以及...

    各种浏览器的默认css 样式

    2. 表格:IE对表格`&lt;table&gt;`的默认边框是1像素的实线,背景色通常是透明,表格单元格`&lt;td&gt;`的垂直对齐方式为`middle`。 3. 浮动元素:IE对浮动元素`float`的支持较早,但存在一些兼容性问题,如经典的"双倍边距"bug...

    网页设计table表格知识.pdf

    10. 表格的跨浏览器兼容性:不同的浏览器对于表格的显示效果可能存在差异,因此在设计表格时要注意跨浏览器兼容性问题,确保表格在不同浏览器下都能正确显示。 了解和掌握这些知识点对于网页设计师而言是基本且必须...

    table合并单元格与img图片铺满整个td的html

    在实际布局时,应注意不同浏览器对布局的支持可能会有差异,因此在开发时需要进行跨浏览器测试。 此外,需要注意的是,示例中的图片路径使用了相对路径`../img/103.jpg`,这意味着图片文件相对于当前HTML文件所在...

    通过CSS让TD自动换行

    在网页设计中,表格(table)是用于组织数据的重要元素,而表格中的单元格(td)则承载着具体的行内信息。有时,我们可能遇到单元格内的文本过长,导致内容溢出,影响了表格的布局和可读性。这时,我们就需要利用CSS...

    用CSS设置表格Table的细边框的比较好用的方法

    它通过设置 `border=0` 和 `cellspacing=1`,然后为表格设置背景色,使其与细边框颜色相同,同时将所有单元格(`td`)的背景色设置为白色。这样,看似没有边框的表格实际上通过背景色的差异显示出了1像素的细线,形成...

    jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera

    比如,某些浏览器可能对事件处理或CSS属性的支持存在差异,我们需要使用适当的polyfill或jQuery插件来弥补这些差异。 最后,我们需要处理数据的保存逻辑。当用户编辑并确认更改后,我们需要更新服务器端的数据。这...

    漂亮的网页 模版 完全利用完成的

    在描述中提到的“完全利用`&lt;table&gt;`完成的整个网页的布局”,意味着这个网页的所有部分,包括头部、主体和底部,可能都是通过`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)等元素来组织的。这种方法的优点是结构清晰,...

    td nowrap css nowrap使用说明于注意事项

    在这个例子中,虽然 `&lt;td&gt;` 元素同时设置了 `nowrap` 和宽度,但由于设置了固定的宽度,文本仍然可能会换行以适应单元格的宽度限制。 #### 五、注意事项 - **兼容性问题**:不同的浏览器对 `nowrap` 属性的支持程度...

    三种居中.docx

    在这个例子中,`align="center"`使得整个表格水平居中,而`valign="middle"`则尝试让表格内的单元格(`&lt;td&gt;`)内容垂直居中,但实际效果可能因浏览器差异而异。 2. Div布局页面居中 在现代浏览器中,更推荐使用CSS来...

    html图片自适应手机屏幕大小的css写法

    body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul { margin: 0; padding: 0; } ``` 重置这些值可以确保页面在不同的浏览器和...

    HTML 自动伸缩的表格Table js实现

    这可能是因为Firefox和其他浏览器在处理内联元素高度和溢出隐藏时的行为差异。为了提高跨浏览器兼容性,开发者需要进一步优化代码,以适应Firefox和其他现代浏览器。 5. **使用方法**:要使用AutoTableSize,首先将...

    css之自动换行.pdf

    本文主要探讨如何使用CSS来解决自动换行的问题,特别是针对IE和Firefox浏览器的差异。 首先,块级元素如`div`和`p`默认具有`white-space:normal`属性,这意味着当定义了宽度后,内容会根据需要自动换行。例如: ``...

    表格制作说明.docx

    - 不同浏览器可能对边框的渲染存在差异,如设置`border="0"`时,有些浏览器可能会显示格线。 4. **处理空白栏** - HTML会自动合并连续的空格,为保持表格内的空白,可以使用非换行空格符号`&nbsp;`。 - 当数据中...

    网页制作 TD也可以溢出隐藏显示

    理论上,将这两个属性组合应用于TD元素似乎可以实现文本溢出隐藏的效果,但在实际应用中,某些浏览器对这种组合的支持并不理想,特别是在固定宽度的TD中。 为了解决这个问题,本文提供了几种可能的解决方案。最直接...

Global site tag (gtag.js) - Google Analytics