Ich habe eine formatierte Tabelle, die ich Spalte Größenanpassung und andere Funktionen erstellen. Hier ist mein Code (erhältlich bei that Fiddle):HTML Colspan funktioniert nicht auf formatierten Tabelle mit Kopfzeile
<div class="ux-data-table">
<div class="ux-data-table-inner">
<table>
<thead>
<tr>
<th class="ux-data-table-th" style="width: 20px; min-width: 20px; max-width: 20px;">
<span class="ux-data-table-th-title">
<input type="checkbox" value="on">
</span>
<div class="ux-data-table-th-grip">
</div>
</th>
<th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
<span class="ux-data-table-th-title">Name</span>
<span class="ux-data-table-th-icon-spacer"></span>
<span class="fa fa-long-arrow-up"></span>
<div class="ux-data-table-th-grip"></div>
</th>
<th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
<span class="ux-data-table-th-title">Description</span>
<span class="ux-data-table-th-icon-spacer"></span>
<div class="ux-data-table-th-grip"></div>
</th>
<th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
<span class="ux-data-table-th-title">Property 1</span>
<span class="ux-data-table-th-icon-spacer"></span>
<div class="ux-data-table-th-grip"></div>
</th>
<th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
<span class="ux-data-table-th-title">Property 2</span>
<span class="ux-data-table-th-icon-spacer"></span>
<div class="ux-data-table-th-grip"></div>
</th>
<th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
<span class="ux-data-table-th-title">Property 3</span>
<span class="ux-data-table-th-icon-spacer"></span>
<div class="ux-data-table-th-grip"></div>
</th>
<th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
<span class="ux-data-table-th-title">Property 4</span>
<span class="ux-data-table-th-icon-spacer"></span>
<div class="ux-data-table-th-grip"></div>
</th>
<th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
<span class="ux-data-table-th-title">Property 5</span>
<span class="ux-data-table-th-icon-spacer"></span>
<div class="ux-data-table-th-grip"></div>
</th>
</tr>
</thead>
<tbody class="ux-data-table-nodata">
<tr>
<td colspan="8">No data found.</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
.ux-data-table {
width: auto;
max-width: 100%;
height: calc(100vh - 300px);
overflow: auto;
float: left;
}
.ux-data-table-inner {
position: relative;
}
.ux-data-table table {
width: 100%;
}
.ux-data-table table,
.ux-data-table th,
.ux-data-table td {
border-style: solid;
border-width: 1px;
border-color: blue;
border-collapse: collapse;
color: black;
background-color: white;
text-align: left;
font-weight: normal;
font-size: 12px;
padding: 5px;
}
.ux-data-table thead {
position: absolute;
}
.ux-data-table tbody {
margin-top: 20px;
display: block;
}
.ux-data-table table thead tr th {
letter-spacing: 1px;
}
.ux-data-table table tr:hover td {
background-color: #f0f0ff;
}
.ux-data-table-th-icon-spacer {
padding-left: 5px;
}
.ux-data-table-th-title {
cursor: n-resize;
vertical-align: middle;
}
.ux-data-table-th {
position: relative;
}
.ux-data-table-th-grip {
width: 5px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
cursor: col-resize;
}
.ux-data-table-clear {
clear: both;
}
.ux-data-table-checkbox-grayed {
filter: invert(25%);
}
.ux-data-table-selected-cell td {
background-color: #f0ffff;
}
.ux-data-table-nodata {
position: initial;
display: table-row-group;
width: 100%;
}
Die „Griffen“ gehen, um für die Spalte verwendet werden, die Größe zusammen mit JavaScript-Code und es funktioniert gut (nur zu sagen, dass die Griffe nicht aus HTML entfernt werden können). Auf die gleiche Weise gibt es Sortiericons in Spalten, die das Klicken auf die Tabellensortierung zulassen.
Die Kopfzeile ist getrennt, so dass bei einer Scroll-Bewegung die Kopfzeile oben auf div bleibt.
Die Tabelle funktioniert gut, wenn sie Daten enthält.
Im Moment möchte ich eine Nachricht anzeigen, wenn die Tabelle keine Daten enthält, etwa "Keine Daten gefunden". Ich brauche diese Nachricht in meinen 8 Spalten.
Ich habe eine Colspan-Funktion verwendet, aber mein Problem ist, dass der Colspan nicht in den vollen 8 Spalten der Tabelle, sondern nur in den ersten 2 Spalten angezeigt wird.
Ich brauche eine Möglichkeit, die Zeile "No data found" in allen 8 Spalten anzuzeigen. Ich kann das ursprüngliche CSS nicht ändern, da die ganze Tabelle funktioniert (Größe der Spalten ändern, Stil anpassen, Kopfzeile losgelöst usw.). Auch die Breite der Spalten ist nicht festgelegt (sie sind in diesem Code festgelegt, aber sie sind dynamisch aufgebaut, so dass die Summe der Breiten das Problem nicht löst).
Die Klasse 'ux-data-table-nodata' funktioniert nicht, da die Breite irgendwie auf die zweite Spalte beschränkt ist.
Mit dieser Hilfe wird die Spalte "Keine Daten gefunden" so erweitert, dass sie horizontal auf die 8 Spalten erweitert wird.
Sind Sie sicher, dass Sie 7 Spalten wollen?Sie haben 8 Spalten in der '', also sollten Sie entweder, '' zu '' in '
' hinzufügen, ändern Sie den 'colspan' auf 8, entfernen Sie eine'@ zer00me: Sicher, es sind 8 Spalten !! Ich habe die Select-Spalte vergessen .... Bearbeitet und korrigiert ... – Mendes
Sie verwenden SASS? Bitte poste CSS in kompilierter Form. – zer00ne
Antwort
Das Problem scheint, dass Sie den Tabellenkopf vom HTML-Fluss trennen, indem Sie seine Position auf absolut setzen.
Sobald Sie das entfernen und auch den Anzeigeblock von tbody entfernen, verhält sich die Tabelle wie erwartet. Hier
ein Beispiel:
HTML
CSS
Und eine Geige Demonstration
https://jsfiddle.net/jfeferman/bjyomm2s/
eingestellten Position absolut auf Thead Unter der Annahme, zu versuchen, einen festen Header zu erreichen, müssen Sie einige CSS-Tricks wie im folgenden Beispiel tun:
https://www.virendrachandak.com/techtalk/sticky-header-and-footer-using-css/
Quelle
2017-08-27 01:55:23 jfeferman
Wie gesagt, kann ich die Abtrennung aufgrund anderer funktionierender Tabellenfunktionen (Sortieren, Spaltengröße, feste Kopfzeile bei Blättern usw.) nicht entfernen. Ich brauche eine Lösung, die die vorhandenen Klassen bewahrt ... Der Trick, auf den Sie hingewiesen haben, löst das Problem nicht. – Mendes
Ich glaube nicht, dass es möglich ist, das Colspan-Attribut in einer Tabelle mit einem abgetrennten Header arbeiten zu lassen. Wenn Sie auch Funktionen wie die Größenänderung benötigen, müssen Sie auf die Breitenberechnung für Ihre tBody-Zellen zurückgreifen. Dazu können Sie die Breite der Spalten berechnen, wenn die Tabelle an das DOM angehängt ist, und dann die Größe der gewünschten Zeile ändern. Irgendwann müssen Sie das CSS umgestalten und JavaScript-Berechnungen implementieren, um die gewünschte Funktionalität zu erreichen. – jfeferman
Das ist die Herausforderung hier ..... – Mendes
Verwandte Themen