Home >Web Front-end >HTML Tutorial >How to prevent the nested parallel td in the table from breaking the outer table_html/css_WEB-ITnose
I defined a table with a width set to 700 pixels, and there are many TDs in it.
Now how do I ensure that the TDs embedded inside do not break the outer table?
Also, the content in b6c5a531a458a2e790c1fd6421739d1c...b90dd5946f0946207856a8a37f441edf must be centered. With style='float:left', everything is displayed on the left, which is not the effect I want.
The table structure is roughly like this:
<table width=700px border=1> <tr align=center> <td width=150px>内嵌内容A</td> <td width=150px>内嵌内容b</td> <td width=150px>内嵌内容c</td> <td width=150px>内嵌内容d</td> <!--按理说,到这行就该换行显示了,可事实上没有--> <td width=150px>内嵌内容e</td> </tr></table>
Replaced with
ul
Looks like I haven’t heard of it Will the TD in TR be displayed in a new line? ?
The tds in the table will not wrap, because the width of each td is the same, so when the width of all your tds exceeds the width of the entire table, the system will automatically reduce the width of the table The proportion of td is divided equally among all td
Replaced with
ul
The poster said that CSS will not be considered for the time being
Postmaster, you can only embed a new table in TD
cannot be looped over TD. TD will not wrap automatically. It can only be looped over table
Code (float:left must be used):
<table width=700px border=1> <tr align=center> <td width=150px><table style='float:left'><tr><td>内容1</td></tr></table></td> <td width=150px><table style='float:left'><tr><td>内容2</td></tr></table></td> <td width=150px><table style='float:left'><tr><td>内容3</td></tr></table></td> <td width=150px><table style='float:left'><tr><td>内容4</td></tr></table></td> <td width=150px><table style='float:left'><tr><td>内容5</td></tr></table></td> <td width=150px><table style='float:left'><tr><td>内容6</td></tr></table></td> </tr></table>
Sorry, I made a mistake upstairs. I wrote TD twice. The correct one is this:
<table width=700px border=1> <tr align=center> <td width=150px> <table style='float:left'><tr><td>内容1</td></tr></table> <table style='float:left'><tr><td>内容2</td></tr></table> <table style='float:left'><tr><td>内容3</td></tr></table> <table style='float:left'><tr><td>内容4</td></tr></table> <table style='float:left'><tr><td>内容5</td></tr></table> </td> </tr></table>