5 Möglichkeiten, den diagonalen Kopfzeileneffekt in der Tabelle zu erzielen

Jeder muss mit Tabellen vertraut sein. Wir stoßen häufig im Code darauf. Dann ist es manchmal notwendig, der Tabelle einen Schrägstrich als Überschrift hinzuzufügen, aber wie erreicht man diesen Effekt?

Ich habe die folgenden Methoden zusammengefasst:

1. Die einfachste Methode

Gehen Sie direkt zur Benutzeroberfläche des Unternehmens und bitten Sie sie, ein Bild zu erstellen, es hier als Hintergrundbild einzufügen und es dann auszufüllen. Ist das nicht einfach? ! !

2. Ein ziemlich einfacher Ansatz

Tatsächlich fällt Freunden, die mit CSS3 vertraut sind, bei diesem Effekt sofort das Transform-Attribut ein. Ja, das ist tatsächlich möglich und es ist auch sehr einfach. Das einzige Problem ist, dass Sie auf das Problem der Browserkompatibilität achten müssen. Jeder sollte immer ein Gefühl der Krise im Herzen behalten (IE existiert immer noch). Wenn Ihr Unternehmen nur Kompatibilität mit Chrome erfordert, ist diese Methode für Sie geeignet.

3. Sehr einfache Methode

.biaoTou {
                border-top: 200px #199fff solid; /*Die Breite des oberen Rahmens entspricht der Höhe der ersten Zeile der Tabelle*/  
                border-left: 200px #ff8838 solid; /*Die linke Rahmenbreite entspricht der Breite der ersten Zelle der ersten Zeile der Tabelle*/  
            }

<td Breite="200">
    <div Klasse="biaoTou">
                        
    </div>
</td>

Auch diese Methode ist sehr einfach: Schreiben Sie es einfach entsprechend dem obigen Format auf. Diese Schreibmethode hat jedoch ein offensichtliches Problem: Sie verwendet tatsächlich zwei verschiedene Rahmenfarben, um die diagonale Linie der Tabellenüberschrift zu unterteilen. Die Farben auf beiden Seiten der diagonalen Linie können nicht gleich sein. Diese Methode kann verwendet werden, wenn Sie Werbeaktivitäten oder andere Formen durchführen. Wenn die Farben auf beiden Seiten der Diagonale jedoch gleich sein müssen, ist dieser Ansatz nicht anwendbar. Mit Vorsicht verwenden.

4. Ein sehr einfacher Ansatz

Dieser Effekt kann tatsächlich mit einem weiteren neuen Tag in CSS3 erzielt werden: Canvas. Es als Leinwand zu verwenden, um eine diagonale Linie zu zeichnen, ist ein sehr einfacher Ansatz, daher werde ich ihn nicht im Detail erklären. Es gibt jedoch auch ein Problem, nämlich das alte Kompatibilitätsproblem. Wenn es nur mit Chrome kompatibel ist, können Sie tun, was Sie wollen (warum muss unser Unternehmen immer den verdammten IE berücksichtigen? Ich möchte auch nur Projekte durchführen, die mit Google kompatibel sind).

5. Kein einfacher Ansatz

Das ist der js-Ansatz

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<HTML>  
<KOPF>  
<TITLE>Schrägstrich-Überschrift</TITLE>  
<meta http-equiv="Inhaltstyp" Inhalt="Zeichensatz=gbk">  
</KOPF>  
  
<body linker Rand=0 oberer Rand=0>  
    <br>  
    <div Höhe="300">Kopfzeile</div>  
    <hr>  
    <Tabelle Rahmen=0 bgcolor="000000" cellspacing="1" width=400  
        Stil="Rand links: 100px;">  
        <TR bgcolor="FFFFFF">  
            <TD Breite="111" Höhe="52"><Tabelle Breite="100%" Höhe="100%"  
                    border="0" cellpadding="0" cellspacing="0">  
                    <tr>  
                        <td id="td1"></td>  
                        <td>Ergebnisse</td>  
                    </tr>  
                    <tr>  
                        <td>Name</td>  
                        <td id="td2"></td>  
                    </tr>  
                </table></TD>  
            <TD width="81">Mathematik</TD>  
            <TD width="96">Englisch</TD>  
            <TD width="99">C-Sprache</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>Zhang San</TD>  
            <TD>55</TD>  
            <TD>66</TD>  
            <TD>77</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>Li Si</TD>  
            <TD>99</TD>  
            <TD>68</TD>  
            <TD>71</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>Wang Wu</TD>  
            <TD>33</TD>  
            <TD>44</TD>  
            <TD>55</TD>  
        </TR>  
    </TABLE>  
    <Skripttyp="text/javascript">  
        Funktion a(x, y, Farbe) {  
            dokumentieren  
                    .write("<img border='0' style='position: absolute; left: "  
                            + (x)  
                            + "; oben: "  
                            + (j)  
                            + ";Hintergrundfarbe: "  
                            + Farbe  
                            + "' src='px.gif' Breite=1 Höhe=1>")  
        }  
        Funktion getTop(tdobj) {  
            vParent = tdobj.offsetParent;  
            t = tdobj.offsetTop;  
            während (vParent.tagName.toUpperCase() != "BODY") {  
                t += vParent.offsetTop;  
                vParentvParent = vParent.offsetParent;  
            }  
            Rückkehr t;  
        }  
  
        Funktion getLeft(tdobj) {  
            vParent = tdobj.offsetParent;  
            t = tdobj.offsetLeft;  
            während (vParent.tagName.toUpperCase() != "BODY") {  
                t += vParent.offsetLeft;  
                vParentvParent = vParent.offsetParent;  
            }  
            Rückkehr t;  
        }  
        Funktion Linie(x1, y1, x2, y2, Farbe) {  
            var tmp  
            wenn (x1 >= x2) {  
                tmp = x1;  
                x1 = x2;  
                x2 = zeitweilig;  
                tmp = y1;  
                y1 = y2;  
                y2 = zeitweilig;  
            }  
            für (var i = x1; i <= x2; i++) {  
                x = ich;  
                y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;  
                a(x, y, Farbe);  
            }  
        }  
        //Zeile(1,1,100,100,"000000");   
        Zeile(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth,  
                getTop(td1) + td1.offsetHeight, '#000000');  
        Zeile(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth,  
                getTop(td2) + td2.offsetHeight, '#000000');  
    </Skript>  
</BODY>  
</HTML>

Okay, ich habe die fünf Methoden erklärt. Ich hoffe, sie werden Ihnen beim Lernen helfen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

<<: Detaillierte Erklärung des Integer-Datentyps tinyint in MySQL

>>: CSS zur Realisierung der Einzelauswahl-Faltmenüfunktion

Implementierung der Ausführung von SQL Server mit Docker

Beispielcode für die Entwicklung einer H5-Formularseite basierend auf React-Hooks und der Konfiguration der Zarm-Komponentenbibliothek

Vor kurzem habe ich React Hooks in Kombination mi...

5 Möglichkeiten, den diagonalen Kopfzeileneffekt in der Tabelle zu erzielen

Implementierung der Ausführung von SQL Server mit Docker

ThingJS-Partikeleffekte, um Regen- und Schneeeffekte mit einem Klick zu erzielen

Diagramm des installationsfreien Konfigurationsprozesses für komprimierte MySQL 5.7.17-Pakete

Detaillierte Erklärung der CSS-Elastic-Box Flex-Grow, Flex-Shrink und Flex-Basis

Detailliertes grafisches Tutorial zur Installation und Deinstallation von Tomcat8 unter Linux

(MariaDB) Umfassende Erklärung der MySQL-Datentypen und Speichermechanismen

Eine kurze Diskussion über die Unterschiede und Verbindungen zwischen .html, .htm, .shtml und .shtm

Detailliertes Tutorial zur Installation der virtuellen Python 3-Umgebung in Ubuntu 20.04

Grafisches Tutorial zur Installation von MySQL5.7.18 im Windows-System

Die Eisernen Gesetze der MySQL-Datenbank (Zusammenfassung)

Artikel empfehlen

JavaScript zum Implementieren des Vorladens und verzögerten Ladens von Bildern

MySQL Dual-Machine Hot-Standby-Implementierungslösung [testbar]

Asynchrone Programmierung in Javascript: Verstehen Sie Promise wirklich?

So verwenden Sie CSS, um mehrere Bilder horizontal in der Mitte anzuzeigen

Detaillierte Erläuterung des Grafikbeispiels für Vue-Überwachungsattribute

Beispielcode für die Entwicklung einer H5-Formularseite basierend auf React-Hooks und der Konfiguration der Zarm-Komponentenbibliothek

Die gleichzeitige Ausführung unter Linux ist einfach. Gehen Sie dazu einfach wie folgt vor

JavaScript zum Erreichen eines vollständigen oder umgekehrten Auswahleffekts im Formular

Was sind Web Slices?

Detaillierte Erläuterung der Nginx-Frontend-Verteilungsmethode basierend auf $remote_addr

Beispielanalyse der MySQL-Codeausführungsstruktur [Sequenz-, Verzweigungs-, Schleifenstruktur]

Alibaba Cloud Centos7 Installation und Konfiguration von SVN

So empfangen Sie einen binären Dateistream in Vue, um eine PDF-Vorschau zu realisieren

Mit CSS3 erstellter Hintergrundverlaufsanimationseffekt

Uniapps Erfahrung in der Entwicklung kleiner Programme