Hi Luciano,

Did you use your browser's development tools (e.g. F12 in Chrome) to see where the line is coming from?

Hi Kilian, how are you ?

there is a tr for each line.  it seems I have to change the class, but how and which one? See below

You'd need to check what causes the line, whether it's the tr or the td. If it's the tr, you could override the "table-row" class, if it's the td you need to select for the right attribute ([data-header] in case of the header, I don't know what the others have).

looks like a CSS padding on the tr element or table-row class.

Hi Luciano,

You can remove the separator with this CSS:

.table-row td {
    border-bottom: none;
}

It seems we have some doubts here.  Below is what I have using the normal web using list. I just want to reproduce it using reactive web. 

Kilian,

    for me the structure using tr is the problem. The first tr in my first picture has backlog and the other ones have the next phase names. 

When I say line separator I am talking about the list property removing the line between the lines. See the detail in the picture below.  However, if someone have another idea, I will be glad to receive a suggestion.

I have the solution and I will leave the answer here to help someone that might have the same problem.

Don't use the table widget. Use the list widget and add a list item widget, add a field from any instance.

Now you need to customize the list-item css and the magic appears.

SyntaxEditor Code Snippet

.list-item {
    padding: 20px;
    float: left;
    border: 1px solid #d1d1d1;
    border-radius: 2px 2px 2px 2px;
    margin-right: 10px;
    width: 250px;
}

Hi Luciano,

Thanks for reporting back with the answer. I wasn't aware you used another Widget than the List Widget or I would've told you, so it's a good thing you use it now :).

Yeah, I didn't read carefully enough, I didn't say it was your fault :). Have a nice day too! Happy coding :)