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

推薦する

Vue プロジェクトでブラウザ キャッシュ設定を無効にする例

プロジェクトをリリースするときに、キャッシュをクリーンアップする必要があるという問題に遭遇することが...

HTML で 2 つの div タグの間に垂直線を描く方法

最近、インターフェースを描画しているときに、インターフェースに垂直線を描画し、この垂直線の高さが親 ...

ウォーターフォールレイアウト+ダイナミックレンダリングの実装

目次典型的なウォーターフォールウェブサイトウォーターフォールフローレイアウトの原則一般的な考え方具体...

Apache の一般的な仮想ホスト設定方法の分析

1. Apacheサーバーのインストールと設定yum インストール httpd -y systemc...

MySQL Community Server 5.7.16 のグリーン バージョンをインストールしてリモート ログインを実装する方法

1. MySQL Community Server 5.7.16をダウンロードしてインストールします...

LinuxサーバーにVueプロジェクトをデプロイする

ケース1 vue-cliはvue3プロジェクトをビルドし、プロジェクトをLinuxサーバーにアップロ...

Ubuntu 18.04 Linux システムに JDK と Mysql をインストールする方法

プラットフォームの展開1. JDKをインストールするステップ1. OracleJDKをダウンロードす...

ドロップダウンメニュー効果を実現するJavaScript

参考までに、JavaScriptを使用してドロップダウンメニューを実装します。具体的な内容は次のとお...

jsネイティブウォーターフォールフロープラグイン制作

この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...

JavaScript タイマー原理の詳細な説明

目次1. setTimeout() タイマー2. setTimeout() タイマーを停止する3. ...

Centos 7 sshd の変更 | ルートログインの禁止と sshd ポートスクリプトの定義

1. 新しいユーザーwwweee000を作成します [root@localhost ~]# user...

Linux usermod コマンドの使用

1. コマンドの紹介usermod (ユーザー変更) コマンドは、ユーザー アカウントを変更するため...

ウェブ理論: 考えさせない読書ノート

第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...

Windowsタイムサーバーの設定方法の詳しい説明

最近、会社のサーバーの時間が不正確で、外部の時間ソースと同期できないことがわかりました。会社はドメイ...

Dockerfile を使用して Docker でイメージを構築する方法

イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...