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

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

php中文网

发布： 2016-06-24 11:45:25

原创

1281人浏览过

我发现订宽没用，【中,英文,符号混合的内容】会让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>

登录后复制

码上飞

码上飞（CodeFlying）是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

138

查看详情

回复讨论(解决方案)

放同一个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>

登录后复制