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

テーブル関連の配置と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を使用してファイルアップロードパターンを描画する

推薦する

HTML の iframe と frame の違いを例を使って説明します

プロジェクトで frameset 属性を使用したことがあるかどうかはわかりません。昨年、オンライン ...

MySQLデータベースのロック機構の分析

同時アクセスの場合、非反復読み取りやその他の読み取り現象が発生する可能性があります。高い同時実行性に...

Linux に MySQL をインストールする方法 (yum とソース コードのコンパイル)

Linux に MySQL をインストールするには、yum インストールとソース コード コンパイ...

忘れられたボタンタグ

注:この記事は他の人によって翻訳されていますが、考えるべき点が多く、理解しにくい点もあると感じていま...

JavaScript のアンチシェイクとスロットリングの違いと実装

目次1. 手ぶれ補正2. スロットリング3. まとめ序文:フロントエンド開発者には、次の 2 つの要...

Vue-Jest自動テストの基本構成の詳しい説明

目次インストール構成よくある間違い事前テスト作業依存関係の扱いインスタンスとDOMを生成する要約する...

Win10 への MySQL 5.7 のインストール MSI 版のチュートリアル(画像とテキスト付き)

主にインストール後に my.ini ファイルを確認するために、msi 形式でインストールしました。フ...

html2canvasで画像が正常にキャプチャできない時の解決方法

質問まず、私が遭遇した問題についてお話しします。まず、そういった需要があるわけです。フロントエンドは...

MySQL 5.5.27 winx64 のインストールと設定方法のグラフィックチュートリアル

1. インストールパッケージMYSQLサービスダウンロードアドレス:MySQL公式サイトからダウンロ...

Jsモジュール化の動作原理とソリューションの詳細な説明

目次1. モジュラーコンセプト2. モジュール化3. モジュール化プロセス1. 通常の記述(グローバ...

Ubuntu で XFS ファイルシステム用の LVM を作成する方法

序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...

Docker Composeのデプロイと基本的な使い方の詳しい説明

1. Docker Composeの概要Compose は、マルチコンテナ Docker アプリケー...

HTML でテーブルを分割および結合する (colspan、rowspan)

このコードは水平マージを示しています。 <!DOCTYPE html PUBLIC "...

WMLとは何ですか?

WML (ワイヤレス マークアップ言語)。これは HTML から派生したマークアップ言語ですが、W...

Vue3における非親子コンポーネント通信の詳細な説明

目次最初の方法アプリ.vueホーム.vueホームコンテンツ.vueデータの応答性レスポンシブプロパテ...