挣扎 Table 单元格宽度和内联输入

Question

我正在使用 bootstrap 3.3.7。我使用以下 class

创建了 table

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

<tbody></tbody> with <tr><td></td></tr> 是从 ajax 调用生成的，并且工作正常。但是，每个单元格的宽度会随着内容的长度而变化。我无法根据内容的预期长度实现固定宽度。

此外，我们如何将输入直接输入末尾的空白行 table，其中包含文本、下拉菜单和日期时间选择器。

该部分代码如下。在此我也无法捕获 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>

挣扎 Table 单元格宽度和内联输入

Struggling with Table cell Widths and inline Inputs

cell

width