Home  >  Article  >  Web Front-end  >  How to prevent the nested parallel td in the table from breaking the outer table_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:14:201013browse

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>


The width of each 04a9424aea79d7e9b86559d6a25ece7c 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>

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>

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