Table related collation and JavaScript operation table, TR, TD

Time:2021-2-21

Good table property settings:

Copy code

The code is as follows:

<table cellSpacing=”0″ cellPadding=”0″ border=’1′ bordercolor=”black”
style=’border-collapse:collapse;table-layout: fixed’></table>

Many people have this experience: when there is no content or visible element in a TD, the border of TD will disappear. The solution is to add a style border to the table- collapse:collapse
General text truncation (for 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;/ *Do not wrap*/
white- space:nowrap;/ *Do not wrap*/
overflow:hidden;/ *Hide the content beyond the width*/
text- overflow:ellipsis;/ *When the text in the object overflows, the ellipsis mark (…) is displayed overflow:hidden; Used together. */
}

For tables, the definition is a little different:

Copy code

The code is as follows:

table{
width:30em;
table- layout:fixed;/ *Only if the table layout algorithm is defined as fixed, the following definition of TD can work. */
}
td{
width:100%;
word- break:keep-all;/ *Do not wrap*/
white- space:nowrap;/ *Do not wrap*/
overflow:hidden;/ *Hide the content beyond the width*/
text- overflow:ellipsis;/ *When the text in the object overflows, the ellipsis mark (…) is displayed overflow:hidden; Used together. */
}

JavaScript operation table, TR, TD

Copy code

The code is as follows:

table.moveRow (m, n) / / the rows between (ie) m and N of the exchange table move in turn
table.deleteRow (index) / / line deletion
table.insertRow (index) / / insert a row in the index position 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 //Returns the position of TD in tr