Generic Content widget tables are creating a bottom border?

I'm also seeing this in some of our Articles as well. I'm using a table to display some images and text in a way that I want to but I'm seeing a border line appear at the bottom of the rows in the tables even though there's nothing in the HTML that indicates its presence? See here: https://engx.theiet.org/a/support/c/profile-and-account-management/SU38270/community-achievement-badges for an example. Those lines were not added by me and can't see how to remove them in the html source code when editing? 

 LisaM Jason - I looked at Lisa's link, that line is defined in the screen.less file:

.modal-content .content>.content table th,.content-fragment .content>.content table th,.popup-list .content>.content table th,.modal-content .content>.content table td,.content-fragment .content>.content table td,.popup-list .content>.content table td {
word-wrap: normal;
line-height: 1.5em;
padding: 13.333333333px;
border-bottom: 1px solid #b0b0b0
}

It can be overwritten from the theme level (with an override to the code), on the page level (with an Unfiltered HTML widget), or on the cell level (Cell Properties) by changing that to 0px on each cell in the table. 

LisaM said:

Those lines were not added by me and can't see how to remove them in the html source code when editing? 

I can go into more detail on this part if you need from the Source Code, but here's an example: 

and here's the code:

<table>
<tbody>
<tr>
<td>cell with the border</td>
<td style="border: #fff solid 0px;">cell without the border</td>
</tr>
</tbody>
</table>

Alex Nassi said:

It can be overwritten from the theme level (with an override to the code), on the page level (with an Unfiltered HTML widget), or on the cell level (Cell Properties) by changing that to 0px on each cell in the table. 

The screen.less file associated with my Site's theme does not appear ot have any table settings in it.  The modal.less file has some, but adding "border-box: 0px" and "border-top: 0px" did not seem to change anything.

Setting the table's border to 0px and its border color to the same as the background color also did nothing.

What seems to have worked was going into each individual cell and setting the border color to the background color (which in this case was #FFFFFF).  This feels very much like a hack, but at least it worked.

What's also annoying is that settings on tables, rows, and cells don't display every time you open the dialog box to change something.  You have to re-enter them every time or else it thinks you are saving over the setting with a blank value.

Thanks for the tips!

Yes, tables are not the easiest to style, but by judging what you need to do, it is an option.

The other option would be to have consistent rendering in the article for the images and then use CSS to float: left so they appear to the left of the adjacent paragraph. It would make content generation easy, although it wouldn't look the same in preview, it would render fine

Last suggestion is to create a new custom.less or cssoverrides.css file and put all your customizations there. It becomes a challenge with future updates to make changes direct to theme files.

Sorry Alex I should have been clearer, what I meant is that there is nothing in the html source code when editing the article that is telling me there is a border there. I know my way around HTML...  

For example here is a section of the html source code available when editing the article (i.e. accessible from the editing toolbar) 

<h2 id="mcetoc_1hmh5g2de3"><span>Badges for Bloggers</span></h2>
<p><span>Badges are awarded to blog authors who receive likes on their blog posts.</span></p>
<p><span>They are&nbsp;awarded for receiving a number of likes on 5 (Readers like), 20 (Readers Pick), 50 (Readers Selection), 100 (Readers Choice) and 500+ (Readers Favourite) of their blog posts</span></p>
<p><span></span></p>
<table height="141" width="752">
<tbody>
<tr>
<td><img alt="Readers Like" src="/cfs-file/__key/articles/4104e3f22ee54425bbed7f7a50e43361-a-9965ed7dd6674ea586c899a9a769227c-v-7df8ae0c59f24f9dae39305bb412a451/3858.People-like-what-I-write-1-copy.svg" /></td>
<td><img alt="Readers Pick" src="/cfs-file/__key/articles/4104e3f22ee54425bbed7f7a50e43361-a-9965ed7dd6674ea586c899a9a769227c-v-7df8ae0c59f24f9dae39305bb412a451/1588.People-like-what-I-write-2.svg" /></td>
<td><img alt="Readers Selection" src="/cfs-file/__key/articles/4104e3f22ee54425bbed7f7a50e43361-a-9965ed7dd6674ea586c899a9a769227c-v-7df8ae0c59f24f9dae39305bb412a451/7217.People-like-what-I-write-3.svg" /></td>
<td><img alt="Readers Choice" src="/cfs-file/__key/articles/4104e3f22ee54425bbed7f7a50e43361-a-9965ed7dd6674ea586c899a9a769227c-v-7df8ae0c59f24f9dae39305bb412a451/5481.People-like-what-I-write-4.svg" /></td>
<td><img alt="Readers Favourite" src="/cfs-file/__key/articles/4104e3f22ee54425bbed7f7a50e43361-a-9965ed7dd6674ea586c899a9a769227c-v-7df8ae0c59f24f9dae39305bb412a451/2110.People-like-what-I-write-5.svg" /></td>
</tr>
</tbody>
</table>

No where in there does it indicate that there is a bottom border in either the table or the rows or cells. 

Surely it doesn't make sense to put the table style in the style.less coding as community members will want to style their own tables in their own content? 

Sorry Alex I should have been clearer, what I meant is that there is nothing in the html source code when editing the article that is telling me there is a border there. I know my way around HTML...  

As you can see in the image above, there is no indication in the html source code when editing the article that there are borders applied to the bottom row of the table. 

It doesn't make sense to add table styling into the style.less file as surely community members will want to style their own tables in their own content? 

The styling is coming from the site, but that will be overridden with in-line styling in the Source Code HTML. Since it's not defined otherwise in the source code, it's taking the site's default styling. If you add in the styling manually (inline, unfortunately, is the easiest option), that Source Code version will be the primary styling for the article. Like Jason said above,

Jason said:

This feels very much like a hack, but at least it worked.

I agree with you -- that's how I'd expect it to work, but the expectation doesn't fit with reality in this situation. You can also make a change, like John Reynolds mentioned, to make this change from an override so that the default then becomes no border, and the author can add a border they want.