> 웹 프론트엔드 > HTML 튜토리얼 > CSS 嵌套table 居中问题_html/css_WEB-ITnose

CSS 嵌套table 居中问题_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:18:02
원래의
1337명이 탐색했습니다.

按常理来说,只要在父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就是居中不了,麻烦帮我分析下~谢谢


回复讨论(解决方案)

在线求解!哪怕是一点点建议也行啊~

饿别在tr里面加center

加在 td里面 style="text-align:center"

加在 td里面 style="text-align:center" 效果一样。早试过了

最外层在个div



这样就居中了

<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就行了

按常理来说……
不能按常理啊


  

试一下


    

  

  
    
  

        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
        
      
单位工程数量 总建筑面积 单价(元/平) 小计
合计 大写:
            




不一样,不信你可以试试


   

        

给里面的table加上display:inline-table;就可以了。
之前不能居中应该是因为text-align不能作用于block level的元素,所以对table不起作用。 


   

        

给里面的table加上display:inline-table;就可以了。
之前不能居中应该是因为text-align不能作用于block …… OK,好了,谢谢
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿