Luttant avec des largeurs de cellules de table et des entrées en ligne

Question

J'utilise le bootstrap 3.3.7. J'ai créé table en utilisant la classe suivante

Le <tbody></tbody> with <tr><td></td></tr> est généré à partir appel ajax et qui fonctionne bien. Cependant, la largeur de chaque cellule change avec la longueur du contenu. Je suis incapable d'atteindre la largeur fixe selon la longueur prévue du contenu.

En outre, comment pouvons-nous prendre des entrées directement dans une ligne vide à la table de fin ayant du texte, une liste déroulante et datetimepicker.

Cette partie du code est la suivante. En cela, je ne suis pas en mesure de saisir la valeur datetimepicker aussi: -

$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>