If you're looking to enhance the readability of your DateTimePicker without needing to use the "position: absolute;" CSS property, then I've created a code snippet in HTML that might interest you. The existing design with green background, bullet points, and missing increment and decrement arrows can be replaced with this snippet, which also includes a clickable calendar icon.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<table class="contenu_popup">
<col width=auto><col width=auto>
<tr>
<td id="test1">test line 1</td>
<td><input type="text"/></td>
</tr>
<tr>
<td id="test">TimePicker test</td>
<td>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="margin-top: 5px">
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div></td>
</tr>
<tr>
<td id="test2">test line 3</td>
<td><input type="text"/></td>
</tr>
</table>