input { box-sizing: border-box; width: 276px; padding: 5px 7px; margin: 0; outline: 0; font-size: 1.1em; background: #fff; border: #e3e1d5 1px solid; border-radius: 2px; transition: all 0.15s ease-in-out; } table { margin: 1.6em 0; box-sizing: border-box; width: 100%; max-width: 100%; background-color: transparent; } tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } table th, table td { padding: 8px; line-height: 20px; text-align: left; vertical-align: middle; border-top: 1px solid #edece4 }
<div> <table> <tr> <td>Date of birth:</td> <td> <input type="text" id="dateOfBirth" class="datePicker" value="Click me." /> </td> </tr> <tr> <td>From:</td> <td> <input type="text" id="from" class="datePicker" value="Click me." /> </td> </tr> <tr> <td>To:</td> <td> <input type="text" id="to" class="datePicker" value="Click me." /> </td> </tr> </table> </div>
// set the date pickers. $('.datePicker').datepicker();