[Bug]: Fix table stripped CSS to embed lizmap-features-table-container

[vlebert]

What is the bug? (in English)

Is some case, it is convenient to ember lizmap-features-table-container inside the attribute table. This permits to keep the automatic popup layout while adding interactivity with child elements.

However, I had to do some fixtures to map.css for the table-stripped style not to mess up the lizmap-features-table-container style

Here is my quick fix, but the fix should be done properly in Lizmap basecode:

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
    background-color: inherit;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}

Steps to reproduce the issue

Add a lizmap-features-table-container in the attribute layer with automatid display for popup.

Versions, safeguards, check summary etc

Versions :

• Lizmap Web Client : 3.8.7 - commit bee4379f1 https://github.com/3liz/lizmap-web-client/commit/bee4379f1
• Lizmap plugin : 4.5.0
• QGIS Desktop : 3.34.6
• Lizmap.com : Yes
• QGIS Server : 3.34.14
• Py-QGIS-Server : 1.9.5
• QGIS Server plugin atlasprint : 3.4.2
• QGIS Server plugin cadastre : 2.0.1
• QGIS Server plugin lizmap_server : 2.13.0
• QGIS Server plugin wfsOutputExtension : 1.8.3

List of Lizmap Web Client modules :

* webdav : 1.2.0 * saas : 1.7.6

List of safeguards :

* Mode : normal
* Allow parent folder : no
* Prevent other drive : yes
* Prevent PG service : no
* Prevent PG Auth DB : yes
* Force PG user&pass : yes
* Prevent ECW : yes

Check Lizmap plugin

• [x] I have done the step just before in the Lizmap QGIS desktop plugin before opening this ticket. Otherwise, my ticket is not considered valid and might get closed.

Operating system

Lizmap Hosting

Browsers

Chrome

Browsers version

Version 1.91.2 (62278)

Relevant log output

[rldhont]

@vlebert is your proposed code could be intergated like that ?

[vlebert]

I think the fix is to replace the present style

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}

With this selector, more precise :

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}