テーブル関連の配置とJavascript操作テーブル、tr、td

適切に機能するテーブルプロパティ設定:

コードをコピー

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

<テーブルセル間隔="0" セルパディング="0" 境界線='1' 境界線の色="黒"
style='border-collapse:collapse;table-layout: fixed'></table>

多くの人がこのような経験をしたことがあるでしょう。td にコンテンツや可視要素がない場合、td の境界線も消えてしまいます。解決策は、テーブルにスタイルborder-collapse:collapseを追加することです。
一般的なテキストの切り捨て (インラインとブロックの両方に適用):

コードをコピー

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

.テキストオーバーフロー{
display:block;/*インラインオブジェクトを追加する必要があります*/
幅:31em;
word-break:keep-all;/* 改行なし*/
white-space:nowrap;/* 改行なし*/
overflow:hidden;/*コンテンツが幅を超えたときに余分なコンテンツを非表示にする*/
text-overflow:ellipsis; /* テキストがオブジェクト内でオーバーフローする場合に省略記号 (...) を表示します。overflow:hidden; と一緒に使用する必要があります。 */
}

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

コードをコピー

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

テーブル{
幅:30em;
table-layout:fixed;/* 次の td 定義は、テーブルレイアウトアルゴリズムが固定として定義されている場合にのみ機能します。 */
}
td{
幅:100%;
word-break:keep-all;/* 改行なし*/
white-space:nowrap;/* 改行なし*/
overflow:hidden;/*コンテンツが幅を超えたときに余分なコンテンツを非表示にする*/
text-overflow:ellipsis; /* テキストがオブジェクト内でオーバーフローする場合に省略記号 (...) を表示します。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(インデックス)
tr.rowIndex // テーブル内のtrの位置を返します
td.cellIndex //tr 内の td の位置を返す

<<: ニューススタイルのウェブサイトデザイン例25選

>>: CSSを使用してファイルアップロードパターンを描画する