[Resolved] How to insert a divider between table rows

[Author]

Posts

[theW]

I am trying to:

Add a divider:

[themify_hr color="#73af00" width="100%" border_width="20px"]

In my Loop with Views:
Code in my "Loop Output Editor"

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<table width="100%">
		<thead>
          [wpv-found-count]
			<tr>
				<th>[wpv-heading name=""][/wpv-heading]</th>
				<th>[wpv-heading name="post-link"]Title[/wpv-heading]</th>
				<th>[wpv-heading name="types-field-loan-number"]Number[/wpv-heading]</th>
				<th>[wpv-heading name="types-field-status"]Status[/wpv-heading]</th>
				<th>[wpv-heading name=""]Log[/wpv-heading]</th>
			</tr>
		</thead>               
		<tbody class="wpv-loop js-wpv-loop">
		<wpv-loop>
			<tr>   
				[wpv-post-body view_template="Loop item in Current Users Projects"]
			</tr>
		</wpv-loop>
		</tbody>
	</table>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No projects found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Code in my "Loop item in Current Users Projects"

<td>[wpv-post-featured-image]</td>
<td>[wpv-post-link]</td>
<td>[types field='loan-number'][/types]<br>
[wpv-post-date]<br>
<a href="[wpv-bloginfo show='url']/[wpv-post-type]/[wpv-post-slug]">VIEW</a>
</td>
<td>[types field='status'][/types]<br>
[wpv-post-comments-number]<br>
[toolset-edit-post-link layout_slug="update-project"]UPDATE[/toolset-edit-post-link]&nbsp;&nbsp;[cred_delete_post_link class='cred-refresh-after-delete' text='Delete' message='Are you sure you want to delete this project?' message_after='Project deleted' message_show='1' action='trash']  
</td>
<td>[wpv-view name="Login User Project Count"]</td>

Link to a page where the issue can be seen:
hidden link

I expected to see:

Instead, I got:

I've tried this for hours and can't get it right... could you please tell me where to insert my short code?:

[themify_hr color="#73af00" width="100%" border_width="20px"]

[Christian Cox]

Well it's not valid HTML to include this type of shortcode directly inside the table, tbody, or tr tags. You could put it directly in the td tags, but it will be broken apart into cells. So I think the best solution is to use CSS to style the bottom of each row instead. Something like this in your loop:

<tr class="border-bottom">   
                [wpv-post-body view_template="Loop item in Current Users Projects"]
            </tr>

And this in your Content Template CSS:

tr.border-bottom {
    border-bottom: 1px solid #73af00;
}

[theW]

Oh wow!
Thank you so much Cox!
This indeed worked... the only remaining issue is that the line touches the pictures...
I'm trying to add some padding/margin under or above this border.

I tried:

tr.border-bottom {
    border-bottom: 10px solid #73af00;
    padding: 50px;
    margin: 50px;
}

No success..

I've tried a bunch of combinations but I don't seem to get it right..
I even tried copying your method:

	<tr class="border-bottom" class="border-top">   
                [wpv-post-body view_template="Loop item in Current Users Projects"]
        </tr>

with

tr.border-bottom {
    border-bottom: 10px solid #73af00;
}
tr.border-top {
    border-top: 10px solid #ffffff;
}

But no success. Could you please help me figure this out as well?

Also, is it possible to make the first cell of each row not as wide?
I really like how the feature image displays 100% width and 100% height without any cropping but there is still too much space in the right.. (Please see my image attached)

[Mohammed]

Hi,

I'm posting here to notify you that Christian is off today. he will get back tomorrow and handle your request.

Thanks.

[Christian Cox]

I'm trying to add some padding/margin under or above this border.
Add the padding to each td element in the row instead:

tr.border-bottom td {
    padding-top: 20px;
    padding-bottom: 20px;
}

<tr class="border-bottom" class="border-top"> 

FYI: To add multiple classes to the same element, combine them in a single class attribute instead:

<tr class="border-bottom border-top">  

Also, is it possible to make the first cell of each row not as wide?
Yes, you can set a specific width for the first cell in each row like this:

<td style="width:150px;">[wpv-post-featured-image]</td>

[theW]

Thank you Mohammed and Thank you Cox!!
The code you provided solved a ton of my problems!
Happy New year!