Table Table Broadband Research (included: Table table Why set TD width is not valid)

Scenario 1: The following code defines the table broadband as 600px, the TD broadband is not set, 3 TD content is three-in-one, you can see 3 content divided into the width of table.

That is, each TD is 200px (Please note: If you use Chrome to debug the width, there will be some error, because 600px also includes a border, so the actual width may be 198px, here is simplified, the same below).

<table style= "width:600px; Background-color:red ">            <tr>                <td>1</td>                <td>2</td>                <td>3 </td>            </tr>                </table>

Next, modify the contents of the first TD and change the 1 to 11, the result is as follows:

Because: the first cell "11" is 2 characters broadband, the second cell "2" is a character broadband, the third cell "3" is a character broadband.

The total is 4 characters wide, so the ratio is 2:1:1. So the first cell is: 600*2/4=300px. The 2nd and 3rd are all 600*1/4=150px widths.

If the first content is too long, the default is to refer to the height of the high table instead of extending the height of the table (you can extend the width by placing a div in the TD, as shown at the end of this article),

For example, the table is already defined as 600px, the first TD content is already greater than 600px

At this point, the table does not allow the 600PX,TD to display TD content with a newline. The remaining cells are still in the same table width as the proportions of the contents.

Display, cell 1 and cell 2 distribute the remaining width of the table.

In short, one conclusion: if TD broadband is not set, each cell will divide the width of the table according to the proportions of each content length .

Scenario 2:

The defined table bandwidth is 600, but the sum of the first and third widths is already greater than 600px.

At this point, the system calculates the second actual width, assuming that the second one is 40px, and then the first and third are proportionally evenly divided by the remaining width.

<table style= "width:600px; Background-color:blue ">            <tr>                <td width=" 400px "> 1                </td>                 <td  >                   222222                </td>                <td width= "400px" >3</td>            </tr>                </table>

Case 3: If the TD is not wide enough, it will be filled automatically. , the first 100px, the third 200px, the second TD nature is: 600-100-200=300px

<table style= "width:600px; Background-color:blue ">            <tr>                <td width=" 100px "> 1                </td>                 <td  >                   222222                </td>                <td width= "200px" >3</td>            </tr>                </table >

Scenario 4: Simultaneous use of percentages and numbers, high percentage priority

  <table style= "width:600px; Background-color:blue ">            <tr>                <td width=" 200px "> 1                </td>                 <td width=" 50% "  >                   2                </td>                <td width= "200px" >3</td>            </tr>                </table>

The above code calculates TD2 broadband in two ways: (1) because TD1 is 200,td3 200PX,TD2 is 600-200-200=200, in computing 50%, then TD2 broadband should be 100px

(2) The TD2 50% is half the table, so the TD2 broadband is 300. Then TD1 and td3 proportional 1:1 to the remaining 300, then which is the correct calculation?

Run it, the effect is as follows, and the second method is correct.

Scenario 5:

   <table style= "width:600px; Background-color:blue ">            <tr>                <td width=" 100px ">                     <div style=" width:400px ">                       1                    </div>                </td>                 <td  >                     2                </td>                <td>3</td>            </tr>                </table>

Although TD definition is 100px, but the inside Div is set to 400px, that is, if the TD content is plain text, more than 100px will be in TD line

However, if the TD div sets the width, it will support the default value of TD.

Conclusion:the broadband defined by TD is the default width, and the actual width is determined by the content .

Table Table Broadband Research (included: Table table Why set TD width is not valid)