Table column with empty header cutoff on small widths - html

Question

Using table-responsive with header fields, the right most column has buttons and no text in the header. When the width is too small, the column is cut off and not completely viewable using the scroll. If text is added for the header, nearly all of the column is visible, but I don't want to do this and it's not a complete solution.
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table st-table="appointments" class="table table-striped table-appointments">
<thead>
<tr>
<th>Family Id</th>
<th>Survey Name</th>
<th>Appointment Date</th>
<th>Start Time</th>
<th>Progress</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="appointment in $ctrl.appointments">
<td class="appointments-familyid">{{appointment.familyIdName}}</td>
<td class="appointments-survey">{{appointment.surveyName}}</td>
<td class="appointments-date">{{appointment.date | date:'MMMM dd, yyyy'}}</td>
<td class="appointments-starttime">{{appointment.startTime | date:'hh:mm a'}}</td>
<td class="appointments-progress">{{appointment.progress}}</td>
<td class="appointments-begin">
<button type="button" ng-click="$ctrl.startSurvey(appointment)" class="btn btn-sm btn-success">
Begin Survey
<i class="glyphicon glyphicon-circle-arrow-right">
</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
td.appointments-familyid{
width: 5%;
}
td.appointments-counselor{
width: 20%;
}
td.appointments-survey{
width: 25%;
}
td.appointments-date{
width: 10%;
}
td.appointments-starttime{
width: 15%;
}
td.appointments-progress{
width: 15%;
}
td.appointments-begin{
width:10%;
}
table.table-appointments td{
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
table-responsive adds:
.table-responsive {
min-height: .01%;
overflow-x: auto;
margin-right: 20px;
}
The rendered table looks like this: