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

Zusammenfassung der HTML-Hack-Tags im IE-Browser

Code kopieren Der Code lautet wie folgt: <!--[...

HTML+CSS zum Erstellen einer Schaltfläche im Cyberpunk-Stil

Erster Blick auf die Wirkung: Vorwort: Auf diese ...

Detaillierte Erläuterung der Fallstricke des Nginx-Proxy-Socket.io-Dienstes

Inhaltsverzeichnis Nginx fungiert als Proxy für z...

Eine kurze Analyse der Verwendung von watchEffect in Vue3

Vorwort Jeder sollte mit der Watch-API in vue2 ve...

Zusammenfassung zur Verwendung von HTML-Meta-Tags (empfohlen)

Meta-Tag-Funktion Der META-Tag ist ein Schlüsselt...

Gemessenes Bild - HTTP-Anforderung

Bitte öffnen Sie die Testseite in einem gängigen ...

So isolieren Sie Benutzer in Docker-Containern

Im vorherigen Artikel „UID und GID in Docker-Cont...

JavaScript-Entwurfsmuster, Befehlsmuster

Das Befehlsmuster ist ein Verhaltensentwurfsmuste...

Der Interviewer fragte, wie man in CSS ein festes Seitenverhältnis erreicht

Möglicherweise hatten Sie für diese Frage bisher ...

Zwei Verwendungen von iFrame-Tags in HTML

Ich habe kürzlich an einem Projekt gearbeitet – B...