Home >Web Front-end >HTML Tutorial >I'm almost screwed. How to force the upper and lower grids to be completely aligned?_html/css_WEB-ITnose

I'm almost screwed. How to force the upper and lower grids to be completely aligned?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:45:251196browse

I found that setting the width is useless. [Contents with mixed Chinese, English, and symbols] will cause TD to make incorrect judgments on line cutting... resulting in the upper and lower tables being unable to align

How can I solve this problem? Be sure to align >.<"


<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>


Reply to discussion (solution)

Let it go In a table

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

In the same table



Not in the same Table because

I also There is a package Panel
In order to control certain situations, the content of a certain block appears
so I split two Tables

I found a way to solve it yesterday

table-layout: fixed

But the width must be set first


What does it mean?

<!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>


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn