Tabellenbezogene Anordnung und Javascript-Operationen table, tr, td

Tabellenbezogene Anordnung und Javascript-Operationen table, tr, td
Gut funktionierende Einstellungen für Tabelleneigenschaften:

Code kopieren
Der Code lautet wie folgt:

<table cellSpacing="0" cellPadding="0" border='1' bordercolor="schwarz"
Stil='border-collapse:collapse;table-layout: fest'></table>

Viele Leute haben diese Erfahrung gemacht: Wenn in einem TD kein Inhalt oder keine sichtbaren Elemente vorhanden sind, verschwindet auch der Rand des TD. Die Lösung besteht darin, der Tabelle den Stil border-collapse:collapse hinzuzufügen.
Allgemeine Textkürzung (gilt sowohl für Inline- als auch für Blocktext):

Code kopieren
Der Code lautet wie folgt:

.text-overflow{
display:block;/*Inline-Objekte müssen hinzugefügt werden*/
Breite: 31em;
Wortumbruch:alles behalten;/* Kein Zeilenumbruch*/
white-space:nowrap;/* Kein Zeilenumbruch*/
overflow:hidden;/*Überschüssigen Inhalt ausblenden, wenn der Inhalt die Breite überschreitet*/
text-overflow:ellipsis; /* Zeigt ein Auslassungszeichen (...) an, wenn der Text innerhalb eines Objekts überläuft; muss zusammen mit overflow:hidden; verwendet werden. */
}

Bei Tabellen ist die Definition etwas anders:

Code kopieren
Der Code lautet wie folgt:

Tisch{
Breite: 30em;
table-layout:fixed;/* Die folgende td-Definition funktioniert nur, wenn der Tabellenlayout-Algorithmus als fest definiert ist. */
}
td{
Breite: 100 %;
Wortumbruch:alles behalten;/* Kein Zeilenumbruch*/
white-space:nowrap;/* Kein Zeilenumbruch*/
overflow:hidden;/*Überschüssigen Inhalt ausblenden, wenn der Inhalt die Breite überschreitet*/
text-overflow:ellipsis; /* Zeigt ein Auslassungszeichen (...) an, wenn der Text innerhalb eines Objekts überläuft; muss zusammen mit overflow:hidden; verwendet werden. */
}

Javascript-Operationstabelle, tr, td

Code kopieren
Der Code lautet wie folgt:

table.moveRow(m,n) //Vertausche die Zeilen der Tabelle (IE) Die Zeilen zwischen m und n werden der Reihe nach verschoben
table.deleteRow(index) // Zeile löschen
table.insertRow(index) //Fügt eine Zeile bei Index ein und gibt den TR zurück
tr.insertCell(index) //Fügt eine Zelle ein und gibt den TD zurück
tr.deleteCell(index)
tr.rowIndex // Gibt die Position von tr in der Tabelle zurück
td.cellIndex //Gibt die Position von td in tr zurück

<<:  25 Beispiele für Website-Design im Nachrichtenstil

>>:  Verwenden Sie CSS, um ein Datei-Upload-Muster zu zeichnen

Artikel empfehlen

Vue-Praxis zur Vermeidung mehrfacher Klicks

Im Allgemeinen werden Klickereignisse in verschie...

Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen

1. Elemente und Tags in HTML <br />Ein Elem...

Implementierung von Portalen und Fehlergrenzbehandlung in React

Inhaltsverzeichnis Portale Fehlergrenzenbehandlun...

Detaillierte Erklärung von Prototypen und Prototypenketten in JavaScript

Inhaltsverzeichnis Prototyp-Kettendiagramm Grundl...

Zusammenfassung der Unterschiede zwischen Get- und Post-Anfragen in Vue

Die Betriebsumgebung dieses Tutorials: Windows 7-...

Tutorials der MySQL-Reihe für Anfänger

Inhaltsverzeichnis 1. Grundkonzepte und Grundbefe...

Eine kurze Diskussion über den VUE Uni-App-Lebenszyklus

Inhaltsverzeichnis 1. Anwendungslebenszyklus 2. S...

Praktische Aufzeichnung von VUE mithilfe des Wortwolkendiagramms von Echarts

echarts Wortwolke ist eine Erweiterung von echart...

WeChat-Applet zum Abrufen eines Schrittdatensatzes für Mobiltelefonnummern

Vorwort Kürzlich bin ich bei der Entwicklung eine...

MySQL-Export ganzer oder einzelner Tabellendaten

Exportieren einer einzelnen Tabelle mysqldump -u ...

So konfigurieren Sie MySQL8 in Nacos

1. Erstellen Sie die MySQL-Datenbank nacos_config...

Webdesigner ist ein geeignetes Talent

<br />Es gibt keine Straße auf der Welt. Wen...

Vergleich der Effizienz der Dateneinfügung in MySQL

Beim Einfügen von Daten stellte ich fest, dass ic...