cari

Rumah  >  Artikel  >  hujung hadapan web  >  快被搞死了 如何强迫上下格子完全对齐 ?_html/css_WEB-ITnose

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

WBOY
WBOYasal
2016-06-24 11:45:251178semak imbas

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


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于html的table背景问题_html/css_WEB-ITnoseArtikel seterusnya：css 隐藏html元素的方法_html/css_WEB-ITnose

Artikel berkaitan

Lihat lagi