Question

我正在使用bootstrap 3.3.7。我使用以下类创建了表

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

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

另外，我们如何将输入直接输入到包含text，dropdown和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

＆＃13;

table tbody tr td{
  width:150px !important;
}

＆＃13;

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

＆＃13;

与表格单元格宽度和内联输入一起苦苦挣扎

1 个答案: