suchen

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

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

WBOY
WBOYOriginal
2016-06-24 11:45:251179Durchsuche

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


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：关于html的table背景问题_html/css_WEB-ITnoseNächster Artikel：css 隐藏html元素的方法_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen