CSS 嵌套table 居中问题

liujin9012 2012-12-27 04:30:17
按常理来说，只要在父table的tr 或td里设置text-align:center就能居中了。可是VS设计器里居中了，浏览器居中不了。ff里不居中还可以理解，连IE也不能就费解了。
<tr style="text-align:center">

                <td>

                    <table style="border-collapse:collapse">

                        <tr style="text-align:center;">

                            <td style="border:solid #000 1px">单位工程数量</td>

                            <td style="border:solid #000 1px">总建筑面积</td>

                            <td style="border:solid #000 1px">单价（元/平）</td>

                            <td style="border:solid #000 1px">小计</td>

                        </tr>

                        <tr>

                            <td style="border:solid #000 1px"><input id="txt_UnitNum" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9;"/></td>

                            <td style="border:solid #000 1px"><input id="txt_AreaNum" type="text" class="txtInTab"  runat="server" style="text-align:center; background-color: #e6eae9;"/></td>

                            <td style="border:solid #000 1px"><input id="txt_UnitPrice" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9"/></td>

                            <td style="border:solid #000 1px"><input id="txt_Total" type="text" class="txtInTab" readonly="readonly" runat="server" style="text-align:center; background-color: #e6eae9"/></td>

                        </tr>

                        <tr>

                            <td style="text-align:center;border:solid #000 1px">合计</td>

                            <td colspan='2' style="border:solid #000 1px;">大写：<input id="txt_Cap" type="text" class="txtInTab" readonly="readonly" runat="server" style="width: 255px; background-color: #e6eae9" /></td>

                            <td style="border:solid #000 1px"><input id="Text9" type="text" class="txtInTab" readonly="readonly" runat="server" style="background-color: #e6eae9"/></td>

                        </tr>

                    </table>

                </td>

            </tr>

如果有人说是父元素继承的话，那我父元素里没写什么东西
外层table里就多了一句
style="margin-left:auto; margin-right:auto"

body就更谈不上了。只设置了背景和前景色
    body 

    {

        font: normal 9pt auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

        color: #4f6b72;

        background: #E6EAE9;

        margin:0 auto;

    }
但里面的table就是居中不了，麻烦帮我分析下~谢谢
...全文
510 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
liujin9012 2013-01-04
  • 打赏
  • 举报
 回复
引用 10 楼 iamzww 的回复:
<tr style="text-align:center"> <td> <table style="border-collapse:collapse； display:inline-table;"> 给里面的table加上display:inline-table;就可以了。 之前不能居中应该是因为text-align不能作用于block ……
OK,好了，谢谢
iamzww 2012-12-28
  • 打赏
  • 举报
 回复
<tr style="text-align:center"> <td> <table style="border-collapse:collapse； display:inline-table;"> 给里面的table加上display:inline-table;就可以了。 之前不能居中应该是因为text-align不能作用于block level的元素，所以对table不起作用。
白衣旗本 2012-12-28
  • 打赏
  • 举报
 回复
<table style="text-align:center;"> 和 <tr style="text-align:center;"> 不一样，不信你可以试试
白衣旗本 2012-12-28
  • 打赏
  • 举报
 回复
<table style=" width:100%;text-align:center;"> <tr> <td><table style="border-collapse:collapse; width:100%;"> <tr style=""> <td style="border:solid #000 1px">单位工程数量</td> <td style="border:solid #000 1px">总建筑面积</td> <td style="border:solid #000 1px">单价（元/平）</td> <td style="border:solid #000 1px">小计</td> </tr> <tr> <td style="border:solid #000 1px"><input id="txt_UnitNum" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9;"/></td> <td style="border:solid #000 1px"><input id="txt_AreaNum" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9;"/></td> <td style="border:solid #000 1px"><input id="txt_UnitPrice" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9"/></td> <td style="border:solid #000 1px"><input id="txt_Total" type="text" class="txtInTab" readonly="readonly" runat="server" style="text-align:center; background-color: #e6eae9"/></td> </tr> <tr> <td style="text-align:center;border:solid #000 1px">合计</td> <td colspan='2' style="border:solid #000 1px;">大写： <input id="txt_Cap" type="text" class="txtInTab" readonly="readonly" runat="server" style="width: 255px; background-color: #e6eae9" /></td> <td style="border:solid #000 1px"><input id="Text9" type="text" class="txtInTab" readonly="readonly" runat="server" style="background-color: #e6eae9"/></td> </tr> </table></td> </tr> </table>
dongjunhui2010 2012-12-28
  • 打赏
  • 举报
 回复
按常理来说…… 不能按常理啊 <tr> <td> <table align="center"></table> </td> </tr> 试一下
努力的小铺 2012-12-28
  • 打赏
  • 举报
 回复 
<tr style="text-align:center">
                <td>
                    <table style="text-align:center;border-collapse:collapse">
                        <tr style="text-align:center;">
                            <td style="border:solid #000 1px">单位工程数量</td>
                            <td style="border:solid #000 1px">总建筑面积</td>
                            <td style="border:solid #000 1px">单价（元/平）</td>
                            <td style="border:solid #000 1px">小计</td>
                        </tr>
                        <tr>
                            <td style="border:solid #000 1px"><input id="txt_UnitNum" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9;"/></td>
                            <td style="border:solid #000 1px"><input id="txt_AreaNum" type="text" class="txtInTab"  runat="server" style="text-align:center; background-color: #e6eae9;"/></td>
                            <td style="border:solid #000 1px"><input id="txt_UnitPrice" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9"/></td>
                            <td style="border:solid #000 1px"><input id="txt_Total" type="text" class="txtInTab" readonly="readonly" runat="server" style="text-align:center; background-color: #e6eae9"/></td>
                        </tr>
                        <tr>
                            <td style="text-align:center;border:solid #000 1px">合计</td>
                            <td colspan='2' style="border:solid #000 1px;">大写：<input id="txt_Cap" type="text" class="txtInTab" readonly="readonly" runat="server" style="width: 255px; background-color: #e6eae9" /></td>
                            <td style="border:solid #000 1px"><input id="Text9" type="text" class="txtInTab" readonly="readonly" runat="server" style="background-color: #e6eae9"/></td>
                        </tr>
                    </table>
                </td>
            </tr>
在子table里面加上样式text-align:center就行了
蝶恋花雨 2012-12-27
  • 打赏
  • 举报
 回复
最外层在个div <div style="text-align:center"> <table border="1" cellpadding="1" cellspacing="1" style="margin-left:auto; margin-right:auto"> 这样就居中了
liujin9012 2012-12-27
  • 打赏
  • 举报
 回复
引用 3 楼 kongwei521 的回复:
加在 td里面 style="text-align:center"
效果一样。早试过了
蝶恋花雨 2012-12-27
  • 打赏
  • 举报
 回复
加在 td里面 style="text-align:center"
蝶恋花雨 2012-12-27
  • 打赏
  • 举报
 回复
饿别在tr里面加center
liujin9012 2012-12-27
  • 打赏
  • 举报
 回复
在线求解！哪怕是一点点建议也行啊~
CSS让高度不确定图片垂直居中的几种技巧
在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。 复制代码代码如下: <html xmlns=”http:
css实现的让图片垂直居中的方法
下图是理想中的效果图，外部容器的宽度和高度是固定的，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。 但是实际中实现的效果并不是很完美，由于各浏览器的解析都各不相同，所以各浏览器都会有1px-3px的偏差。 方法一 (XHTML 1.0 transitional)： 该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。 HTML结构部分：
div垂直居中-CSS元素垂直居中方法的探究
针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。
对未知高度的图片设置垂直居中的方法详解
标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是利用在img标签的前面插入一对空标签的办法 但是实际在浏览器中实现起来的效果并不是很完美，由于各浏览器的解析都各不相同，所以在各浏览器都会有1px-3px的偏差。方法一： 该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。HTML代码  XML/HTML C
css元素嵌套垂直居中,css实现元素垂直居中显示的7种方式
【一】知道居中元素的宽高absolute + 负margin代码实现.wrapbox5{width: 300px;height: 300px;border:1px solid red;position: relative;}.wrapitem5{width: 100px;height: 50px;position: absolute;background:yellow;top: 50%;left:...
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章