HTML löst das Problem ungültiger Tabellenbreiteneinstellungen

HTML löst das Problem ungültiger Tabellenbreiteneinstellungen

Wenn Sie den Stil „table-layer:fixed“ für eine Tabelle festlegen und feststellen, dass eine Zeile in der Tabelle zusammengeführt wurde, werden die Spaltenbreiten der anderen Zeilen, die nicht zusammengeführt wurden, gemittelt und die Einstellung der Spaltenbreite wird ungültig.

Lösung:

Vor tbody hinzufügen

        <col style="Breite: 100px;"/>
        <Spalte>
        <col style="Breite: 100px;"/>
        <col style="Breite: 100px;"/>
        <col style="Breite: 100px;"/>
.detail {
    Polsterung unten: 50px;
    Rand oben: 80px;
}

.detail_tabelle {
    table-layout:fixed;/*Die Spaltenbreite wird durch die Tabellenbreite und Spaltenbreite bestimmt. */
    Rand: auto;/*Tabelle zentriert*/
    Textausrichtung: zentriert;
    Rand: 1px durchgezogen #804040;
    Rahmen-Zusammenbruch: Zusammenbruch;
}

.detail_table th {
    Polsterung: 26px;
}

.detail_table td {
    Rand: 1px durchgezogen #804040;
    Polsterung oben: 16px;
    Polsterung unten: 16px;
}

.besonders {
    Textausrichtung: links;
    Polsterung links: 20px;
}

<div Klasse="Detail">

    <Tabelle Klasse="Detailtabelle">

        <Kopf>
        <th colspan="5">Details der ausgewählten Optionen</th>
        </thead>
        <!--Wenn Sie schreiben, folgt es der Breite, die Sie schreiben, aber wenn die Breite, die Sie schreiben, die Tabelle nicht füllt, wird es gemäß dem von Ihnen angegebenen Größenverhältnis gleichmäßig auf alle td aufgeteilt-->
        <!--Jetzt sind die vier Spalten 100 Pixel groß und die Spalte ohne Daten nimmt den gesamten Rest ein-->
        <col style="Breite: 100px;"/>
        <Spalte>
        <col style="Breite: 100px;"/>
        <col style="Breite: 100px;"/>
        <col style="Breite: 100px;"/>

        <tbody>

        <tr>
            <td>
                Seriennummer
            <td>
                Problembeschreibung
            <td>
                Entspricht
            <td>
                Nicht konform</td>
            <td>
                Unsicher
        </tr>

        <?php $i = 1; ?>

        <?php foreach ($test als $item): ?>
            <!--Auswahl abrufen-->
            <?php $temp = $this->session->userdata('b' . $i) ?>

            <tr>

                <td>
                    <?php echo $i; ?>
                </td>

                <td>
                    <?php echo $item; ?>
                </td>

                <td>
                    <?php if ($temp == 1): ?>√<?php endif ?>
                </td>
                <td>
                    <?php if ($temp == 2): ?>√<?php endif ?>
                </td>

                <td>
                    <?php if ($temp == 3): ?>√<?php endif ?>
                </td>

            </tr>

            <?php $i++; ?>

        <?php endforeach; ?>

        </tbody>

    </Tabelle>

</div>

Dies ist das Ende dieses Artikels zur Lösung des Problems ungültiger Tabellenbreiteneinstellungen in HTML. Weitere verwandte Inhalte zu ungültigen Tabellenbreiteneinstellungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Lösen Sie das Problem, dass die Methoden der document.getElementBy-Reihe keine Objekte abrufen können

>>:  Zeichnen Sie ein Herz mit CSS3

Artikel empfehlen

Verwenden Sie reines CSS, um einen Scroll-Schatteneffekt zu erzielen

Um es gleich auf den Punkt zu bringen: Bei manche...

Wissen Sie, wie man Mock in einem Vue-Projekt verwendet?

Inhaltsverzeichnis Erster Schritt: Der zweite Sch...

Konvertieren von XHTML-CSS-Seiten in Druckerseiten

<br />In der Vergangenheit musste zum Erstel...

Prinzipielle Beispiele für die vier Netzwerktypen von Docker

Vier Netzwerktypen: Keine: Konfigurieren Sie kein...

Vue Element-ui-Tabelle realisiert Baumstrukturtabelle

In diesem Artikel wird der spezifische Code der E...

Detaillierte Erklärung des strikten Modus in JavaScript

Inhaltsverzeichnis Einführung Verwenden des strik...

Html+CSS-Zeichnungsdreiecksymbol

Schauen wir uns zunächst die Renderings an: XML/H...

Zusammenfassung der MySQL-Anweisungen

Inhaltsverzeichnis 1. Datenbank USE auswählen 2. ...

MySQL-Prozesssteuerung: IF()-, IFNULL()-, NULLIF()-, ISNULL()-Funktionen

In MySQL können Sie die Funktionen IF(), IFNULL()...

Klasse in Front-End-JavaScript

Inhaltsverzeichnis 1. Klasse 1.1 Konstruktor() 1....

Implementierungsbeispiel zum Hochladen mehrerer Anhänge in Vue

Inhaltsverzeichnis Vorwort Kerncode Datei zeigt e...

Detaillierter Vue-Code zur Implementierung der Shuttle-Box-Funktion

Vue - Implementierung der Shuttle-Box-Funktion. D...