Solution to overflow of html table

If the table is wide, it may overflow.

For example, there are two divs, left and right. If the table is in the div on the right, but it is wider, it is likely that it will not be displayed in the div on the right, but will be displayed at the bottom. At this point, you only need to specify the width of the table:

Solve the problem that the content in the HTML table does not force line breaks and automatically hides and displays ellipsis when it exceeds the width

In table layout, we often encounter situations where the layout is chaotic due to changes in the length of the table content. At this time, we may set the cell width to be fixed for layout stability; but when we set the width, we find that it will automatically increase after exceeding the width, and using CSS to define the overflow:hidden; attribute of the element does not work either. The final solution is as follows:

table{
   
    table-layout:fixed;/* The following td definition will work only if the table layout algorithm is defined as fixed. */
}
td{
    width:100%;
    word-break:keep-all;/* No line break*/
    white-space:nowrap;/* No line break*/
    overflow:hidden;/*Hide the excess content when the content exceeds the width*/
    text-overflow:ellipsis; /* Displays an ellipsis mark (...) when the text overflows within an object; must be used together with overflow:hidden;. */
}

If you are worried that you cannot see the complete cell content after it is hidden, it is recommended to add the title attribute value to the cell, which is the complete content of the cell. This way, you can display all of it as long as the mouse passes over it.