Struggling with Table cell Widths and inline Inputs - width

Question

I am using bootstrap 3.3.7. I have created table using the following class
<table id="record-set" class="table table-striped table-bordered">
<thead>
<tr>
<th>Category Type</th>
<th>Station</th>
<th>MoD ID</th>
<th>Nomenclature</th>
<th>Cost</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</table>
The <tbody></tbody> with <tr><td></td></tr> is being generated from ajax call and that is working fine. However, the width of each cell changes with the length of the contents. I am unable to achieve fixed width as per the intended length of contents.
Also, How do we take inputs directly into a blank row at the end table having text, dropdown and datetimepicker.
That part of code is as follows. In this I am not able to capture the datetimepicker value also:-
$tableRow = '<div class="table-responsive"> < table class = "table table-bordered" >
< thead >
< tr >
< th > Cost < /th> < th > AE Amt < /th> < th > Status < /th> < th > Since < /th> < th > Remarks < /th> < th > Updated By < /th> < th > Updated On < /th> < /tr> < /thead> < tbody > ';
$conn = new mysqli($DBSERVER, $DBUSER, $DBPASS, $DBNAME);
$result = mysqli_query($conn, $sql);
$numberOfRecords = mysqli_num_rows($result);
while ($row = mysqli_fetch_array($result)) {
$tableRow = $tableRow.
'<tr class="info">';
$tableRow = $tableRow.
'<td>'.$row['Cost'].
'</td>';
$tableRow = $tableRow.
'<td>'.$row['AE_Amt'].
'</td>';
$tableRow = $tableRow.
'<td>'.$row['Status_Type'].
'</td>';
$tableRow = $tableRow.
'<td>'.$row['Status_Date'].
'</td>';
$tableRow = $tableRow.
'<td>'.$row['Remarks'].
'</td>';
$tableRow = $tableRow.
'<td>'.$row['UpdatedBy'].
'</td>';
$tableRow = $tableRow.
'<td>'.$row['UpdatedOn'].
'</td>';
$tableRow = $tableRow.
'</tr>';
}
$tableRow = $tableRow.
'<tr class="danger">';
//var_dump($numberOfRecords);
if ($numberOfRecords == 0) {
$WhereCondition = 'WHERE (`amwplist`.`Work_ID_by_MoD` = '.$tcn.
')';
$sql = "SELECT * FROM `amwplist` ".$WhereCondition;
$result = mysqli_query($conn, $sql);
//var_dump($sql);
} else {
mysqli_data_seek($result, $numberOfRecords - 1);
}
$row = mysqli_fetch_array($result);
$tableRow = $tableRow.
'<td>'.$row['Cost'].
'</td>';
$tableRow = $tableRow.
'<td><input id="taeamt" width="48" autofocus value="'.$row['AE_Amt'].
'"></td>';
if (IsNullOrEmptyString($row['Status_Type'])) {
$SelectedStatus = 'BOO in Progress';
} else {
$SelectedStatus = $row['Status_Type'];
}
$tableRow = $tableRow.
'<td id="tstatus" contenteditable>'.fill_Full_StatusList($conn, $SelectedStatus).
'</td>';
$tableRow = $tableRow.
'<td><input id="tsince">';
$tableRow = $tableRow.
'<td><input id="tremarks"contenteditable></td>';
$tableRow = $tableRow.
'<td id="tupdatedby">'.$userRow['userName'].
'</td>';
$datenow = new DateTime('now');
$datenow = $datenow - > format('d-m-Y H:i:s');
$tableRow = $tableRow.
'<td id="tupdatedon">'.$datenow.
'</td>';
$tableRow = $tableRow.
'</tr>';
$tableRow = $tableRow.
'</tbody>';
$tableRow. = "</table></div>";
echo($tableRow);

Answer 1

table tbody tr td{
width:150px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<table id="record-set" class="table table-striped table-bordered">
<thead>
<tr>
<th>Category Type</th>
<th>Station</th>
<th>MoD ID</th>
<th>Nomenclature</th>
<th>Cost</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Category Type</td>
<td>Station</td>
<td>MoD ID</td>
<td>Nomenclature</td>
<td>Cost</td>
<td>Status</td>
</tr>
<tr>
<td>Category Type</td>
<td>Station</td>
<td>MoD ID</td>
<td>Nomenclature</td>
<td>Cost</td>
<td>Status</td>
</tr>
</tbody>
</table>