Table related arrangement and Javascript operation table, tr, td

Table property settings that work well:

Copy code

The code is as follows:

Many people have had this experience: when there is no content or no visible elements in a td, the border of the td will also disappear. The solution is to add the style border-collapse:collapse to the table
General text truncation (applies to both inline and block):

Copy code

The code is as follows:

.text-overflow{
display:block;/*Inline objects need to be added*/
width:31em;
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;. */
}

For tables, the definition is a little different:

Copy code

The code is as follows:

table{
width:30em;
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;. */
}

Javascript operations table, tr, td

Copy code

The code is as follows:

table.moveRow(m,n) //Exchange the rows of the table (IE) The rows between m and n are moved in sequence
table.deleteRow(index) // row deletion
table.insertRow(index) //Insert a row at index and return the TR
tr.insertCell(index) //Insert a cell and return the TD
tr.deleteCell(index)
tr.rowIndex // Returns the position of tr in the table
td.cellIndex //Return the position of td in tr

<<: 25 Examples of News-Style Website Design

>>: Use CSS to draw a file upload pattern