Events List visualisation problem

Hi,
I’m sorry if I write again about a problem I wrote some week ago, but I haven’t yet resolve it 🙁

I explain better my problem:

I need to display events list filtered by date (Today, Tomorrow, One choosen date) in my home page, each in one distinct tab.

So I tried some shortcode to do it, this is my situation:

1) for Today and Tomorrow I use this shortcode:
[custom_events]tomorrow[/custom_events]
and this the implementation:

function display_custom_events( $attr, $content = null ) {
ob_start();
echo do_shortcode('[events_list scope="' . $content. '" limit=5 pagination=1 ][/events_list]');
return ob_get_clean();
}
add_shortcode('custom_events', 'display_custom_events');

2) for single date choosen I use:

[custom_search][/custom_search]
and this implementation:

function display_custom_search( $attr, $content = null ) {

	$search_args = em_get_search_form_defaults();
	em_locate_template('templates/events-search.php', true, array('args'=>$search_args));

	$args['limit'] = !empty($args['limit']) ? $args['limit'] : get_option('dbem_events_default_limit');
						if( !empty($args['ajax']) ){ echo '<div class="em-search-ajax">'; } //AJAX wrapper open
						if( get_option('dbem_event_list_groupby') ){
							em_locate_template('templates/events-list-grouped.php', true, array('args'=>$args));
						}else{
							em_locate_template('templates/events-list.php', true, array('args'=>$args));
						}
						if( !empty($args['ajax']) ) echo "</div>"; //AJAX wrapper close

    /*return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>';*/
}
add_shortcode('custom_search', 'display_custom_search');

For the first filter the result is:
https://www.dayroma.it/wp-content/uploads/2016/03/filter-1.jpg

with a lot of margin problem.

The second filter works better:
https://www.dayroma.it/wp-content/uploads/2016/03/filter-2.jpg

For css table I use this css:

.myTableEvents {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #777777;
	border:1px solid #cccccc;

	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;

	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;

	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;

	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.myTableEvents table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.myTableEvents tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.myTableEvents table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.myTableEvents table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}
.myTableEvents tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}

.myTableEvents tr:hover td{

}
.myTableEvents tr:nth-child(odd){ background-color:#f2f2f2; }
.myTableEvents tr:nth-child(even)    { background-color:#ffffff; }
.myTableEvents td{

	border:1px solid #cccccc;
	border-width:0px 1px 1px 0px;
	text-align:left;
	font-size:15px;
	font-family:Arial;
	color:#666666;

}
.myTableEvents tr:last-child td{
	border-width:0px 1px 0px 0px;
}
.myTableEvents tr td:last-child{
	border-width:0px 0px 1px 0px;
}
.myTableEvents tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}

/*
.myTableEvents tr:hover td{
	background:-o-linear-gradient(bottom, #ff3333 5%, #ff3333 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff3333), color-stop(1, #ff3333) );
	background:-moz-linear-gradient( center top, #ff3333 5%, #ff3333 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff3333", endColorstr="#ff3333");	background: -o-linear-gradient(top,#ff3333,#ff3333);

	background-color:#ffe5e5;
}*/

.myTableEvents tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.myTableEvents tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}

and I use this code in EM backend header

<table class="myTableEvents" >
    <thead>
        <tr>
		<th width="20%"></th>
		<th width="80%"></th>
	</tr>
   	</thead>
    <tbody>

and

<tr><div id="event_container" >
      <td>
               #_EVENTIMAGE{200,200}
      </td>
            <td>
               <div id="event_title">#_EVENTLINK</div>

               <div id="event_info"> #_EVENTDATES, #_EVENTTIMES, #_LOCATIONADDRESS, #_LOCATIONNAME </div>
<div id="booking_button">#_BOOKINGBUTTON </div>
 <div id="list_attendees">#_ATTENDEESLIST</div>
            </td>
</div></tr>

in the body.

I really need some help to resolve this css visualisation problem.
I think that some problem is due to pre tag, but I don’t know where to remove it creation.

My aim is having an event list with the format of the second picture

https://www.dayroma.it/wp-content/uploads/2016/03/filter-2.jpg

with a filter by today and tomorrow date, without blank space you see in the bottom.

Sorry if I already asked,
Thank you everybody.