Home > Article > Web Front-end > 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
- WBOYOriginal
- 2016-06-24 11:45:251160browse
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
Previous article：About html table background problem_html/css_WEB-ITnoseNext article：About html table background problem_html/css_WEB-ITnose