带有日期选择器的输入标签在<td>按钮出现在输入标签下面而不是旁边

If I place an input tag with a datepicker attached to it, inside a html table cell, the datepicker-button appears underneath the input tag, but I want it next to it. How can that be done? The widths of the or the tags don't have any influence, nor the character size.

PHP code

<?php
  $startdate="02-01-2014";
  if ($_POST['submit']=='Save') {
    $startdate=$_POST['date1'];
    $startdate1=$startdate;
  }
?>

HTML code

<table>
    <tr>
        <td>starting date:</td>
        <td><input type="text" id="dp1" name="date1" placeholder="starting date" class="form-control" value="<?php echo $startdate; ?>"></td>
    </tr>
</table>

Javascript code

$( "#dp1" ).datepicker();
$( "#dp1" ).datepicker( "option",{
    dateFormat: "dd-mm-yy",
    showAnim: "show",
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    buttonPosition: "right",
    beforeShow: function(){    
        $(".ui-datepicker").css('font-size', 10)}
    });

    //setting the initial date of dp1 to $startdate:
    $( "#dp1" ).datepicker( "setDate", "<?php echo $startdate ?>");