How to prevent the nested parallel td in the table from breaking the outer table_html/css

How to prevent the nested parallel td in the table from breaking the outer table_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:14:20

Original

1057 people have browsed it

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

Copy after login

The width of each is 150. Logically speaking, there should be 4
How can we solve this problem? The use of DIVs does not count. It would take a lot of time to redesign the entire CSS.

Reply to discussion (solution)

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>

Copy after login

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>

Copy after login