1. ホーム
  2. Web制作
  3. HTML/Xhtml

テーブル関連の仕上げとJavascriptによるtable,tr,tdの操作について

2022-01-15 17:42:59
テーブルの属性設定が良い。
コピーコード
コードは以下の通りです。

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

tdの中にコンテンツがない、あるいは可視要素がない場合、tdのボーダーも消えてしまうという経験をされた方は多いと思います。解決策としては、テーブルに border-collapse:collapse というスタイルを追加することです。
一般的なテキストの切り捨て(インラインとブロックの場合)。
コピーコード
コードは以下の通りです。

.text-overflow{
display:block;/* Inline objects need to be added */
width:31em;
word-break:keep-all;/* no line breaks */
white-space:nowrap;/* no line break */
overflow:hidden;/* hide content out of width */
text-overflow:ellipsis;/* Show omitted markers when text overflows inside objects (...) ; needs to be used in conjunction with overflow:hidden;. */
}

テーブルの場合は、定義が少し異なります。
コピーコード
コードは以下の通りです。

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 breaks */
white-space:nowrap;/* no line break */
overflow:hidden;/* hide content out of width */
text-overflow:ellipsis;/* Show omitted markers when text overflows inside objects (...) ; needs to be used in conjunction with overflow:hidden;. */
}

テーブル、tr、tdのJavascript操作
コピーコード
コードは以下の通りです。

table.moveRow(m,n)//swap rows of the table (IE) rows between m and n move sequentially
table.deleteRow(index)// row delete
table.insertRow(index)//Insert row at index position and return the TR
tr.insertCell(index)//insert 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