> 웹 프론트엔드 > HTML 튜토리얼 > 快被搞死了 如何强迫上下格子完全对齐 ?_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:45:25
원래의
1187명이 탐색했습니다.

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


원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿