HTML page adaptive width table

In the pages of WEB applications, tables are often used. Given a limited number of columns, how to adapt the content in each column to screens of different resolutions should be a relatively easy problem to encounter. Here I will talk about my solutions and views on this type of problem. Setting all columns to fixed widths obviously cannot meet such requirements, but if all columns are set to percentages, I am afraid that it will become ugly at certain sizes or resolutions. I am more accustomed to handling it in the following way - assuming that the number of columns in the table is not too large - set most of the column widths to fixed values, leave one column without setting the width, and set the table width to a percentage of the screen (such as 95%, 98%, etc.).

example:

<table width="95%" border="1" cellpadding="2" cellspacing="1">
  <tr>
    <td width="50px" nowrap>Serial number</td>
    <td width="150px" nowrap>Category A</td>
    <td width="150px" nowrap>Category B</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 relatively long content. I personally think that this column can be set as a floating width column to adapt to the width of the page.

However, when half-width characters that are longer than the column width appear in the table, the width of td will be broken by the content. How should this be solved?

The solution to this problem is to add style="word-wrap:break-word;" to the TD of the detail row. This will force the half-width consecutive characters to wrap and avoid breaking the column width.

example:

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

Applying this method, it can solve the problem for td columns with set width, but if the td column has no width set, it will not take effect or the td will be broken. How should it be solved?

The solution to this problem is: when defining the table, add style="table-layout:fixed;" This will force half-width consecutive characters to wrap and not break 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), otherwise the table will no longer be stretched to the appropriate height by the content.

example:

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

This method is applicable to IE and FireFox browsers.

This is the end of this article about adaptive width tables on HTML pages. For more information about adaptive width tables, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!