テーブル関連の編成とJavaScript操作テーブル、tr、td_HTML/Xhtml_Webページ制作

効果的なテーブル属性設定:

コードをコピーします

コードは次のとおりです:

< テーブル 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;/*インライン オブジェクトを追加する必要があります*/
width: 31em;
word-break:keep-all;/* 改行なし*/
white-space:nowrap;/* 改行なし*/
overflow:hidden;/* 余分なコンテンツを非表示にしますコンテンツが幅を超えています*/
text-overflow:ellipsis;/* オブジェクト内のテキストがオーバーフローする場合は、省略記号 (...) を overflow:hidden; と一緒に使用する必要があります。 */
}

テーブルの場合、定義は少し異なります:

コードをコピー

コードは次のとおりです:

table{
width:30em;
table-layout:fixed;/* テーブルのレイアウト アルゴリズムのみが固定として定義されます、以下の td の定義は機能します。 */
}
td{
width:100%;
word-break:keep-all;/* 改行なし*/
white-space:nowrap;/* 行なしBreaks* /
overflow:hidden;/* コンテンツが幅を超える場合、余分なコンテンツを非表示にします*/
text-overflow:ellipsis;/* オブジェクト内のテキストの場合、省略記号 (...) を表示しますoverflows; overflow :hidden; と一緒に使用する必要があります。 */
}

JavaScript 操作テーブル、tr、td

コードをコピー

コードは次のとおりです:

table.moveRow(m,n)//テーブル行の交換 (IE) m と n の間の行は順番に移動されます
table.deleteRow(index )// 行の削除
table.insertRow(index)// インデックス位置に行を挿入し、TR を返します。
tr.insertCell(index)// セルを挿入し、TD を返します。
tr. deleteCell(index )
tr.rowIndex//テーブル内の tr の位置を返します
td.cellIndex //tr 内の td の位置を返します