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 implementiert eine Zeit-Countdown-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Vergleich mehrerer Beispiele zur Einfügungseffizienz in MySQL

Vorwort Aus beruflichen Gründen musste ich kürzli...

Zusammenfassung der Spring Boot Docker-Verpackungstools

Inhaltsverzeichnis Spring Boot Docker Spring-Boot...

Tutorial zur Installation einer MySQL-ZIP-Datei

In diesem Artikel wird die spezifische Methode zu...

Mysql löst das N+1-Abfrageproblem der Datenbank

Einführung In Orm-Frameworks wie Hibernate und My...

Tutorial zur Installation und Konfiguration von MySQL 5.7

In diesem Artikel finden Sie das Tutorial zur Ins...

So vermeiden Sie die Duplizierung von Daten beim Einfügen in einen MySql-Batch

Inhaltsverzeichnis Vorwort 1. Einfügen von ignore...

HTML/CSS (der erste Leitfaden, den Anfänger unbedingt lesen sollten)

1. Die Bedeutung von Webstandards verstehen - War...

HTML-Tabellen-Tag-Tutorial (46): Tabellenfußzeilen-Tag

Mit dem Tag <tfoot> wird der Stil der Tabel...

Tutorial zur Installation und Kennwortkonfiguration von MySQL 5.7.21

Tutorial zur Installation und Kennworteinstellung...

Grafisches Tutorial zur Installation und Konfiguration von CentOS 7

In diesem Artikel wird das ausführliche Installat...