Edit in JSFiddle

<table class="test1">
	<tr>
		<th>foo</th>
		<th>bar</th>
	</tr>
	<tr>
		<td>foo</td>
		<td>bar</td>
	</tr>
</table>

<div class="test2">
    <table>
        <tr>
            <th>foo</th>
            <th>bar</th>
        </tr>
        <tr>
            <td>foo</td>
            <td>bar</td>
        </tr>
    </table>
</div>

.test1 {
	$cal_bdc:#E6A824;
	border: 2px solid $cal_bdc;
	border-collapse: collapse;
	width: 200px;
    margin-bottom:20px;
    border-radius:5px;

	tr {
		border: 1px solid $cal_bdc;
		.today {
    		background-color: #FFF5AC;
		}
	}

	th {
		border: 1px solid $cal_bdc;
		padding: 5px 10px;
		vertical-align: top;
		background-color: #FAFAE9;
	}
	td {
		border: 1px solid $cal_bdc;
		padding: 5px 10px;
		vertical-align: top;
		background-color: #FAFAE9;
	}
}

.test2 {
    $cal_bdc:#E6A824;
    border-radius:5px;
    border: 1px solid $cal_bdc;
    width: 200px;
    margin-bottom:20px;

    table {
        border-collapse: collapse;
        border:none;

    
        tr {
            border: 1px solid $cal_bdc;
            .today {
                background-color: #FFF5AC;
            }
        }
    
        th {
            border: 1px solid $cal_bdc;
            padding: 5px 10px;
            vertical-align: top;
            background-color: #FAFAE9;
        }
    
        td {
            border: 1px solid $cal_bdc;
            padding: 10px;
            vertical-align: top;
            width: 14.2%;
    
        }
    }
}