HTML page adaptive width table

Time:2020-9-23

Web application page, the form of the table is often encountered, in the premise of the limited number of columns, how to adapt the content of each column to the screen with different resolutions should be a relatively easy problem. Let’s talk about my solutions and views on this kind of problem. Setting all columns to a fixed width obviously can’t meet such requirements, but if you set all columns to a percentage, I’m afraid it will become very ugly in some sizes or resolutions. They are used to using the following methods to deal with this problem – on the premise that the number of columns in the table is not too many – most of the column width is set to a fixed value, leaving a column with no width, and setting the width of the table to the percentage of the screen (such as 95%, 98%, etc.).

For example:

<table width="95%" border="1" cellpadding="2" cellspacing="1">
  <tr>
    < TD width = "50px" nowrap > sequence number</td>
    < TD width = "150px" nowrap > classification a</td>
    "Pwidth < 150B > classification</td>
    < TD width = "200px" nowrap > name</td>
    < TD nowrap > description</td>
    < TD width = "100px" nowrap > operation</td>
  </tr>
  ……
</table>

In this example, the column named “description” has a long content. I think that this column can be set as a floating width column to adapt to the width of the page.

However, when the length of the half width character is larger than the column width in the table, the width of TD will be broken by the content. How to solve this problem?

The solution to this problem is: in the TD of the detail line, add style = word- wrap:break-word; In this way, the half width continuous characters can be forced to wrap without breaking the column width.

For example:


    <td align="left" width="150px" style="word-wrap:break-word;">
      ……
    </td> 

Using this method, the TD column with width width can be solved. But if the width of TD column is not set, it will not be effective or will be broken. How to solve this problem?

The way to solve this problem is to append style = table when defining the table- layout:fixed; In this way, the half width continuous characters can be forced to wrap without breaking the column width. It should be noted that after using this parameter, do not easily add the height attribute to tr (row) or TD (column), which will make the table no longer be pushed to the appropriate height by the content.

For example:


<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">
  ……
</table> 

This method is suitable for IE and Firefox browsers.

This article on the HTML page adaptive width of the table (table) article introduced here, more related table adaptive width content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!