Table vertical border issue...

Hi all,

I’m actually facing a problem in trying to design a table with the verical border between cells on the VALO Theme.

After spending some time in fighting with this issue, I have decided to create an ad-hoc ezample.
First I have created a Simple table in my java code:

[code]
public Component createArea()
{
Table retVal = new Table();

    retVal.setStyleName("test");
    retVal.addContainerProperty("cid", Label.class, null, "CID", null, Align.CENTER);
    retVal.setColumnWidth("cid", 75);
    retVal.addContainerProperty("dipendente", Label.class, null, "Dipendente", null, Align.LEFT);
    retVal.setColumnWidth("dipendente", 225);
    retVal.addContainerProperty("tp-modifiche", Label.class, null, "TP Mod", null, Align.CENTER);
    retVal.setColumnWidth("tp-modifiche", 100);
    retVal.addContainerProperty("tp-differenze", Label.class, null, "TP Diff", null, Align.CENTER);
    retVal.setColumnWidth("tp-differenze", 100);
    retVal.addContainerProperty("tx-modifiche", Label.class, null, "TX Mod", null, Align.CENTER);
    retVal.setColumnWidth("tx-modifiche", 100);
    retVal.addContainerProperty("tx-differenze", Label.class, null, "TX Diff", null, Align.CENTER);
    retVal.setColumnWidth("tx-differenze", 100);
    
    List<CHKUserActivity> data = [GET DATA FROM THE DB]

    
    for (int i=0; i<data.size(); i++) {
        CHKUserActivity datum = data.get(i);
        
        Object[] row = new Object[6]

;
row[0]
= buildLabel(“cid”, null, datum.getCid(), null);
row[1]
= buildLabel(“dipendente”, "N.COGNOME " + i, null, null);
row[2]
= buildLabel(“tp-modifiche”, null, datum.getTpModifiche(), null);
row[3]
= buildLabel(“tp-differenze”, null, null, datum.getTpDifferenza());
row[4]
= buildLabel(“tx-modifiche”, null, datum.getTxModifiche(), null);
row[5]
= buildLabel(“tx-differenze”, null, null, datum.getTxDifferenza());

        retVal.addItem(row, i);
    }
    retVal.setPageLength(10);
    
    return retVal;
}

private Label buildLabel(String id, String sVal, Integer iVal, Double dVal)
{
    Label retVal = new Label();
    retVal.setStyleName("cellfield " + id);
    if (sVal != null) retVal.setValue(sVal);
    else if (iVal != null)  retVal.setValue(Helpers.integer2String(iVal));
    else if (dVal != null)  retVal.setValue(Helpers.importo2String(dVal));
    return retVal;
}

[/code]Then I have added this imple css in the .scss file:

.v-table-test .v-table-header-wrap { border-left: solid 1px black; border-right: solid 1px black; } .v-table-test .v-table-resizer { border-left: solid 1px black; border-right: solid 1px black; width: 1px; } .v-table-test .v-table-body { border-left: solid 1px black; border-right: solid 1px black; } .v-table-test .v-table-cell-content { border-left: solid 1px black; border-right: solid 1px black; } I wanted to put both left and right cells to understand better how they would have looked. But trying with just one side didn’t changed much…

This test has was designed by follow the information I read:

/* Table theme building instructions
 * 
 * Vaadin scroll table is very complex widget with dozens of features. These 
 * features set some limitations for theme builder. To keep things working, it
 * is safest to try to just override values used in default theme and comfort to
 * these instructions.
 * 
 * Borders in table header and in table body need to be same width
 * - specify vertical borders on .v-table-header-wrap and .v-table-body
 *
 * Table cells in body:
 *  - padding/border for cells is to be defined for td elements (class name: .v-table-cell-content)
 *  - in default theme there are no borders, but they should work. Just set border-right or border-bottom
 *  - no padding or border is allowed for div inside cells (class name: .v-table-cell-wrapper) element
 *  - background is allowed for both elements
 *
 * Table headers:
 *  - table cells in header contain .v-table-resizer and 
 *      .v-table-caption-container div elements, which are both floated to right
 *  - to align header caption to body content resizer width + .v-table-caption-container
 *    padding right should be equal to content cells padding-right and border-right.
 *  - Possible cell border in header must be themed into column resizer.
 *
 */

The attached image shows how much the output is quite sad.

By checking the html result code, the size of the header cells is +1 than the size of the body cell.
In my case:

<td class="v-table-header-cell" style="width: 226px;">...</td>
<td class="v-table-header-cell" style="width: 101px;">...</td>
<td class="v-table-header-cell" style="width: 101px;">...</td>
<td class="v-table-header-cell" style="width: 101px;">...</td>
<td class="v-table-header-cell" style="width: 101px;">...</td>

The obvious question is:
How to create a table, even a simple one, with normal borders between cells?

ps: actually I have created a “SimpleTable” that mixes together 2 tables, both without headers, one acting as a header and one actiong as the body. But, as you can immagine, i would prefer finding a better solution.

Thanks!

Alessandro

19936.png