So korrigieren Sie die Tabellenbreite in DataTables

Wenn die Tabelle viele Spalten hat, kann es erforderlich sein, die Breite der Tabelle festzulegen. Die Standardbreite von 100 % ist nicht mehr geeignet. Die Standardbreite beträgt 100 %. Wenn Sie die Fenstergröße auf 100 % ändern möchten, fügen Sie width="100 %" zum Tabellenelement hinzu. Der Grund dafür ist unbekannt. Lassen Sie uns darüber sprechen, wie Sie eine feste Breite für Datentabellen festlegen.

1.html-Code

<div id="tableArea"><table id="userTable" class="display table table-bordered" cellspacing="0" ><thead><tr><th style="display: none">ck</th><th>序号</th><th>账号</th><th>姓名</th><th>CPID</th><th>CP名称</th><th>操作</th></tr></thead></table></div>

2 Überschreiben Sie bestimmte Stile (unsere Stile haben eine hohe Priorität, daher überschreiben sie den integrierten. im Stil)

#tableArea .dataTables_wrapper {position: relative;clear: both;zoom: 1;overflow-x: auto;
}#tableArea table{width: 800px;
}

Das overflow-x:auto hier ist neu, was bedeutet, dass eine horizontale Bildlaufleiste angezeigt wird, nachdem der Tabelleninhalt die Breite überschreitet Die Tabelle muss fest codiert sein. Das direkte Schreiben auf das Tabellenelement ist nicht wirksam, der Grund ist unbekannt.

3. Spaltenbreite festlegen (optional)

"columns": [

　　　　{ "data": "number", "orderable": false ,,"searchable": false}
]

4. Beim Surfen Wenn das Browserfenster kleiner als 800 Pixel ist, erscheinen horizontale Bildlaufleisten in der Tabelle, was genau das gewünschte Ergebnis ist.

5. Warum nicht die Konfiguration „scrollX“:true verwenden, um die horizontale Bildlaufleiste zu implementieren? Bei der Abfrage der gerenderten Webseite wurde festgestellt, dass die Tabelle in zwei Tabellen aufgeteilt wurde, eine für den Tabellenkopf und eine für den Tabellenhauptteil. Das ist nicht das, was ich will, und wenn der Inhalt des Headers überschritten wird, wird er ausgeblendet.

Das obige ist der detaillierte Inhalt vonSo korrigieren Sie die Tabellenbreite in DataTables. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!