Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
 | 1 | initial version | |
From this zul code ...
<grid>
<rows>
<row>
<auxhead>
<auxheader label="Verband"/>
<auxheader label="Verein"/>
<auxheader label="Spieler"/>
</auxhead>
<label value="DFB"/>
<label value="BVB"/>
<label value="Wuff, Willi"/>
</row>
<row>
<auxhead>
<auxheader label="Datum"/>
<auxheader label="Verein"/>
<auxheader label="Gegner"/>
<auxheader label="Ergebnis"/>
</auxhead>
<label value="01.01.2020"/>
<label value="FCB"/>
<label value="Müller, Thomas"/>
<label value="2 : 3"/>
</row>
<row>
<label value="01.01.2020"/>
<label value="DSC"/>
<label value="Meier, Uwe"/>
<label value="2 : 3"/>
</row>
</rows>
</grid>
... ZK is generating an unnecessary row with one column containing an empty div block like ...
<tr id="jVWSz" class="z-row">
<td id="jVWS00-chdextr" class="z-row-inner">
<div id="jVWS00-cell" class="z-row-content"></div>
</td>
</tr>
... and ...
<tr id="jVWS91" class="z-row z-grid-odd">
<td id="jVWSb1-chdextr" class="z-row-inner">
<div id="jVWSb1-cell" class="z-row-content"></div>
</td>
</tr>
... above each AuxHeader. You can test this in ZK Sandbox (using web developer tools of your browser). Is there a way to prevent this?
| | 2 | No.2 Revision |
From this zul code ...
<grid>
<rows>
<row>
<auxhead>
<auxheader label="Verband"/>
<auxheader label="Verein"/>
<auxheader label="Spieler"/>
</auxhead>
<label value="DFB"/>
<label value="BVB"/>
<label value="Wuff, Willi"/>
</row>
<row>
<auxhead>
<auxheader label="Datum"/>
<auxheader label="Verein"/>
<auxheader label="Gegner"/>
<auxheader label="Ergebnis"/>
</auxhead>
<label value="01.01.2020"/>
<label value="FCB"/>
<label value="Müller, Thomas"/>
<label value="2 : 3"/>
</row>
<row>
<label value="01.01.2020"/>
<label value="DSC"/>
<label value="Meier, Uwe"/>
<label value="2 : 3"/>
</row>
</rows>
</grid>
... ZK is generating an unnecessary row with one column containing an empty div block like ...
<tr id="jVWSz" class="z-row">
<td id="jVWS00-chdextr" class="z-row-inner">
<div id="jVWS00-cell" class="z-row-content"></div>
</td>
</tr>
... and ...
<tr id="jVWS91" class="z-row z-grid-odd">
<td id="jVWSb1-chdextr" class="z-row-inner">
<div id="jVWSb1-cell" class="z-row-content"></div>
</td>
</tr>
... above each AuxHeader. You can test this in ZK Sandbox (using web developer tools of your browser). Is there a way to prevent this?
Thanks for your reply.
What I'm trying to achieve is a table that looks like this: h t t p s : / / i.imgur.com/wmn4EeT.png
Here is the html which is legit according to w3c validator:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table with two different headers.</title>
<style>
.result {
color: black;
border: 0px;
border-collapse:collapse;
}
.result tr th, .result tr td {
text-align: center;
padding-left: 6pt;
padding-right: 6pt;
border: 1px solid #000;
}
.result tr.blank td {
border: 0px;
}
</style>
</head>
<body>
<table class="result">
<tr>
<th>Player Header 1</th>
<th>Player Header 2</th>
<th>Player Header 3</th>
</tr>
<tr>
<td>Player Data 1</td>
<td>Player Data 2</td>
<td>Player Data 3</td>
</tr>
<tr>
<th>Match Header 1</th>
<th>Match Header 2</th>
<th>Match Header 3</th>
<th>Match Header 4</th>
<th>Match Header 5</th>
</tr>
<tr>
<td>Match Data 1</td>
<td>Match Data 2</td>
<td>Match Data 3</td>
<td>Match Data 4</td>
<td>Match Data 5</td>
</tr>
<tr>
<td>Match Data 1</td>
<td>Match Data 2</td>
<td>Match Data 3</td>
<td>Match Data 4</td>
<td>Match Data 5</td>
</tr>
<tr>
<td>Match Data 1</td>
<td>Match Data 2</td>
<td>Match Data 3</td>
<td>Match Data 4</td>
<td>Match Data 5</td>
</tr>
<tr>
<th>Player Header 1</th>
<th>Player Header 2</th>
<th>Player Header 3</th>
</tr>
<tr>
<td>Player Data 1</td>
<td>Player Data 2</td>
<td>Player Data 3</td>
</tr>
<tr>
<th>Match Header 1</th>
<th>Match Header 2</th>
<th>Match Header 3</th>
<th>Match Header 4</th>
<th>Match Header 5</th>
</tr>
<tr>
<td>Match Data 1</td>
<td>Match Data 2</td>
<td>Match Data 3</td>
<td>Match Data 4</td>
<td>Match Data 5</td>
</tr>
<tr>
<td>Match Data 1</td>
<td>Match Data 2</td>
<td>Match Data 3</td>
<td>Match Data 4</td>
<td>Match Data 5</td>
</tr>
</table>
</body>
</html>
ZK generates a correct tr for the auxheader. That's why I don't think your assumption is correct, @MDuchemin. The only problem is the unnecessary tr above the auxheader-tr:
<table id="lTUA6-cave" style="table-layout:fixed;" width="100%">
<tbody id="lTUA7" class="z-rows">
<!-- unnecessary and unwanted row below -->
<tr id="lTUA21" class="result z-row">
<td id="lTUA31-chdextr" class="z-row-inner">
<div id="lTUA31-cell" class="z-row-content"/>
</td>
</tr>
<tr id="lTUA31" class="z-auxhead" style="text-align:left;">
<th id="lTUA41" class="z-auxheader">
<div id="lTUA41-cave" class="z-auxheader-content">Player Header 1</div>
</th>
<th id="lTUA51" class="z-auxheader">
<div id="lTUA51-cave" class="z-auxheader-content">Player Header 2</div>
</th>
<th id="lTUA61" class="z-auxheader">
<div id="lTUA61-cave" class="z-auxheader-content">Player Header 3</div>
</th>
<th id="lTUA71" class="z-auxheader">
<div id="lTUA71-cave" class="z-auxheader-content">Player Header 4</div>
</th>
<th id="lTUA81" class="z-auxheader">
<div id="lTUA81-cave" class="z-auxheader-content">Player Header 5</div>
</th>
</tr>
<tr>
<td id="lTUA91-chdextr" class="z-row-inner">
<div id="lTUA91-cell" class="z-row-content">
<span id="lTUA91" class="z-label">Player Data 1</span>
</div>
</td>
<td id="lTUAa1-chdextr" class="z-row-inner">
<div id="lTUAa1-cell" class="z-row-content">
<span id="lTUAa1" class="z-label">Player Data 2</span>
</div>
</td>
<td id="lTUAb1-chdextr" class="z-row-inner">
<div id="lTUAb1-cell" class="z-row-content">
<span id="lTUAb1" class="z-label">Player Data 3</span>
</div>
</td>
</tr>
<tr id="lTUAe1" class="result z-row z-grid-odd">
<td id="lTUAf1-chdextr" class="z-row-inner">
<div id="lTUAf1-cell" class="z-row-content"/>
</td>
</tr>
<tr id="lTUAf1" class="z-auxhead" style="text-align:left;">
<th id="lTUAg1" class="z-auxheader">
<div id="lTUAg1-cave" class="z-auxheader-content">Match Header 1</div>
</th>
<th id="lTUAh1" class="z-auxheader">
<div id="lTUAh1-cave" class="z-auxheader-content">Match Header 2</div>
</th>
<th id="lTUAi1" class="z-auxheader">
<div id="lTUAi1-cave" class="z-auxheader-content">Match Header 3</div>
</th>
<th id="lTUAj1" class="z-auxheader">
<div id="lTUAj1-cave" class="z-auxheader-content">Match Header 4</div>
</th>
<th id="lTUAk1" class="z-auxheader">
<div id="lTUAk1-cave" class="z-auxheader-content">Match Header 5</div>
</th>
</tr>
<tr>
<td id="lTUAo1-chdextr" class="z-row-inner">
<div id="lTUAo1-cell" class="z-row-content">
<span id="lTUAo1" class="z-label">Match Data 1</span>
</div>
</td>
<td id="lTUAp1-chdextr" class="z-row-inner">
<div id="lTUAp1-cell" class="z-row-content">
<span id="lTUAp1" class="z-label">Match Data 2</span>
</div>
</td>
<td id="lTUAq1-chdextr" class="z-row-inner">
<div id="lTUAq1-cell" class="z-row-content">
<span id="lTUAq1" class="z-label">Match Data 3</span>
</div>
</td>
<td id="lTUAr1-chdextr" class="z-row-inner">
<div id="lTUAr1-cell" class="z-row-content">
<span id="lTUAr1" class="z-label">Match Data 4</span>
</div>
</td>
<td id="lTUAs1-chdextr" class="z-row-inner">
<div id="lTUAs1-cell" class="z-row-content">
<span id="lTUAs1" class="z-label">Match Data 5</span>
</div>
</td>
</tr>
<!-- ... -->
</tbody>
<tbody class="z-grid-emptybody">
<tr>
<td id="lTUA6-empty" style="display:none">
<div id="lTUA6-empty-content"/>
</td>
</tr>
</tbody>
</table>