IE6 下表内嵌问题感觉很奇怪。

luojihaidao 2010-11-11 04:07:45

是关于table内嵌的。还是直接上代码吧。代码比较少，。
问题：



<table style="width:100%;border:1px red solid;border-collapse: collapse;">

		<tr class='titleRow'>

                    <td style="width:30px;border:1px red solid">1</td><!--这里宽度无法控制了，效果是这四列各占25%-->

                    <td style="width:30px;border:1px red solid"><input type="checkbox"></td>

                    <td>title1</td>

                    <td>title2</td>

         </tr>

		 <tr>

            <td colspan="4" class="firstColumn">

				<table style="width:100%;border:1px red solid;border-collapse: collapse;">

					<tr>

							<td style="border:1px red solid;width:auto">1</td>

							<td style="border:1px red solid;width:80px">211</td><!--在这里去掉宽度 上面列宽可以得到控制  只在IE6下出现这个问题 是IE BUG 还是我还没写对？-->

							<td style="border:1px red solid;width:50px">311</td>

					</tr>



				</table>

			

			</td>

         </tr>

  </table>

...全文

131 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

luojihaidao 2010-11-12

打赏
举报

[Quote=引用 3 楼 hch126163 的回复:]

感觉table 很不好控制，不同浏览器解析都不一样
第一列最好是固定宽度！
[/Quote]

。。。。要的就是第一列自动适应效果。

luojihaidao 2010-11-12

打赏
举报

[Quote=引用 1 楼 sunnj87 的回复:]

不知道是什么原因。可能跟里面的table的第一列width:auto有关系。
如果换成一个固定的宽度是没有问题的
[/Quote]

..... 当然不是这个原因了。

前端小小菜 2010-11-12

打赏
举报

学习了，table现在只用来罗列清单，其他地方一般不用

luojihaidao 2010-11-12

打赏
举报

修改 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
为 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />后列宽可控。

编码影响了显示效果。可能是ie的问题。

用其它方法实现这个效果很容易。只是想知道出个这个的原因是什么？

luojihaidao 2010-11-12

打赏
举报

问题我已经发现了。
原来代码：





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title> new document </title>

  <meta name="generator" content="editplus"/>

  <meta name="author" content=""/>

  <meta name="keywords" content=""/>

  <meta name="description" content=""/>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <style>

  *{padding:0; margin:0}

  body{font-family:"宋体"}

  </style>



 </head>



 <body>

<table style="width:100%;border:1px solid red;border-collapse: collapse;">

	<tr class='titleRow'>

		<td style="width:30px;border:1px solid red">1</td>

		<td style="width:30px;border:1px solid red"><input type="checkbox"></td>

		<td>title1</td>

		<td>我</td>



	</tr>

	<tr>

		<td colspan="4" class="firstColumn">

			<table style="width:100%;border:1px solid red;border-collapse: collapse;">

				<tr>

					<td style="border:1px solid red;width:auto">1</td>

					<td style="border:1px solid red;width:80px">211</td>

					<td style="border:1px solid red;width:50px">311</td>



				</tr>

			</table>

		</td>

	</tr>

  </table>

 </body>

</html>

出来了列宽不可控现象（IE6）。

likelearn 2010-11-12

打赏
举报

IE对表格的处理和FF,OPERA都不同，不太规范。记得以前看过类似一个问题，当时某人找到微软的一个文档，证明了这是IE的一个BUG。

现在对TABLE来布局的已经越来越少了。如果你选择TABLE，那就必须承受这种结果。

dalmeeme 2010-11-11

打赏
举报

不太明白楼主的要求究竟是什么，我把上面稍稍改了下。

<table style="width:100%;border:1px red solid;border-collapse: collapse;">

        <tr class='titleRow'>

                    <td style="width:25%;border:1px red solid">1</td><!--这



里宽度无法控制了，效果是这四列各占25%-->

                    <td style="width:25%;border:1px red solid"><input 



type="checkbox"></td>

                    <td style="width:25%">title1</td>

                    <td style="width:25%">title2</td>

         </tr>

         <tr>

            <td colspan="4" class="firstColumn">

                <table style="width:100%;border:1px red solid;border-



collapse: collapse;">

                    <tr>

                            <td style="border:1px red 



solid;width:auto">1</td>

                            <td style="border:1px red 



solid;width:80px">211</td><!--在这里去掉宽度 上面列宽可以得到控制  只在IE6下



出现这个问题 是IE BUG 还是我还没写对？-->

                            <td style="border:1px red 



solid;width:50px">311</td>

                    </tr>



                </table>

            

            </td>

         </tr>

  </table>