Table related organization and Javascript operations table, tr, td_HTML/Xhtml_Web page production

Table attribute setting with good effect:

Copy the code

The code is as follows:

< table cellSpacing="0" cellPadding="0" border='1' bordercolor="black"
style='border-collapse:collapse;table-layout: fixed'>

Many people have 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 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 breaks*/
white-space:nowrap;/* No line breaks*/
overflow:hidden;/* Hide the excess content when the content exceeds the width*/
text-overflow:ellipsis;/* Display the ellipsis mark (...) when the text in the object overflows; needs to 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;/* Only the layout algorithm of the table is defined as fixed, the definition of td below can work. */
}
td{
width:100%;
word-break:keep-all;/* No line breaks*/
white-space:nowrap;/* No line breaks* /
overflow:hidden;/* Hide the excess content when the content exceeds the width*/
text-overflow:ellipsis;/* Display the ellipsis mark (...) when the text in the object overflows; needs to be used with overflow :hidden; used together. */
}

Javascript operation table, tr, td

Copy code

The code is as follows:

table.moveRow(m,n)//Exchange table rows (IE) The rows between m and n are moved in sequence
table.deleteRow(index)// Row deletion
table.insertRow(index)//Insert a row at 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