テーブルセルの幅とインライン入力で悩む

Question

私はブートストラップ3.3.7を使用しています。私は

<tbody></tbody> with <tr><td></td></tr>は、AJAX呼び出しから生成されている以下のクラスを使用してテーブルを作成して、それが正常に動作しています。しかし、各セルの幅は内容の長さによって変化する。私は意図された内容の長さに従って固定幅を達成することができません。

また、テキスト、ドロップダウン、およびdatetimepickerを持つエンドテーブルで、入力を空の行に直接取り込む方法を教えてください。

その部分は次のとおりです。これで私はまた、DateTimePickerの値をキャプチャすることはできませんよ： -

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