首页 >web前端 >html教程 >快被搞死了 如何强迫上下格子完全对齐 ?_html/css_WEB-ITnose

快被搞死了 如何强迫上下格子完全对齐 ?_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:45:251191浏览

我发现订宽没用,【中,英文,符号混合的内容】会让TD切行判断错误.....导致上下表格无法对齐

请问如何解决这个问题,我一定要对齐 >.

<html><head id="Head1" runat="server">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style>        table.mee {            margin: 0 auto;            font-size: 30px;        }            table.mee th {                text-align: center;                background-color: #4cff00;                height: 30px;                width: 50px;            }            table.mee td {                text-align: center;                width: 50px;            }    </style></head><body>    <form id="form1" runat="server">        <div>            <table>                <tr>                    <td>                        <table border="1" class="mee">                            <tr>                                <th>1</th>                                <th>2</th>                            </tr>                            <tr>                                <td style="background-color: orange">1</td>                                <td>2</td>                            </tr>                        </table>                    </td>                </tr>            </table>            <table>                <tr>                    <td>                        <table border="1" class="mee">                            <tr>                                <th>1</th>                                <th>2</th>                            </tr>                            <tr>                                <td style="background-color: orange">故意打English</td>                                <td>2</td>                            </tr>                        </table>                    </td>                </tr>            </table>        </div>    </form></body></html>


回复讨论(解决方案)

放同一个table里

            table.mee td {                text-align: center;                width: 50px;                word-break:break-all;            }

放同一个table里



不放同一个 Table 是因为

我还有个包 Panel 
为了要控制某些情况,才出现某个区块的内容
所以才拆两个 Table 

我昨天找到一个方法解决了 

table-layout:fixed

不过宽度要先订好


什么意思,两个表格的列对齐吗???

<!DOCTYPE html><html><head id="Head1" runat="server">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style>    /*        将两<table>放在容器里, 给容器一个定宽;        而<table>让它的宽度为100%容器的宽        至于<td><th>则按比例分配<table>的宽    */        .table-container {        width: 300px;    }        .mee {        width: 100%;    }        table.mee th,    table.mee td {        width: 50%;    }    </style></head><body>    <form id="form1" runat="server">        <div class="table-container">            <table border="1" class="mee">                <tr>                    <th>1</th>                    <th>2</th>                </tr>                <tr>                    <td style="background-color: orange">1</td>                    <td>2</td>                </tr>            </table>            <table border="1" class="mee">                <tr>                    <th>1</th>                    <th>2</th>                </tr>                <tr>                    <td style="background-color: orange">故意打English</td>                    <td>2</td>                </tr>            </table>        </div>    </form></body></html>


声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn