How to set the width attribute of the td cell of table tr in html

The width of the table is adaptive, and some TDs are of fixed width. In principle, the width of the table should be set to a fixed value, rather than a value that changes according to the screen. Now let's look at how to set the width of table td cells.

Example 1: The width of the Table is 600px, and the sum of all widths of the Table's td is less than 600px. The browser will automatically calculate the width according to the ratio of the width of the td

<table style="width: 600px;border-collapse: collapse;" >
            <tr>
               <td style="width: 200px;">我是200px</td>
               <td style="width: 200px;">我也是200px</td>
            </tr>
</table>
运行结果：两个td都是300px;

The width of the Table is 600px. The width of the first two TDs is already 600px, so the width of the third TD is not specified. In this case, the width of the third TD is based on the content, and then the first two are based on the width. Ratio column calculation width.

Example 2: The first two tds are smaller than the table width, then the last td plays a completion role

<table style="width: 600px;border-collapse: collapse;" >
            <tr>
                <td style="width: 300px;">我是200px</td>
                <td style="width: 300px;">我也是200px</td>
                <td >我是根据内容的</td>
            </tr>
</table>

Example 3: Within the td in the Table, if the block element is placed more than The width of the td, and the table-layout of the table: fixed; (fixed means that the width of the td is fixed and does not change with the change of the td content). In this way, try not to write overflow: auto; in td because scroll bars will not appear in IE6 and 7. The best way is to wrap a div and set the width to 100%

<table style="width: 600px;border-collapse: collapse;table-layout: fixed;" >
            <tr>
                <td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td>
               <td >我是自由宽度</td>
            </tr>
        </table>

The above is the detailed content of How to set the width attribute of the td cell of table tr in html. For more information, please follow other related articles on the PHP Chinese website!