Bootstrap 4 - 使用输入/选择菜单修复列宽

Question

我有一个包含9列的简单表 - 我正在使用最后一行来允许用户向表中添加数据，我在其中一个输入上使用选择菜单让用户从列表中进行选择。

似乎添加最后一行/选择菜单会导致列的宽度增加，以适应选择菜单中的最大选项，覆盖我在表标题行中设置的列宽。

这是没有最后一个输入/行的表：

#if NET40
    public static void NET_Flush(FileStream mfs)
    {
        mfs.Flush(true);
    }
#else

    [System.Runtime.InteropServices.DllImport("kernel32.dll", ExactSpelling = true, SetLastError = true)]
    private static extern bool FlushFileBuffers(IntPtr hFile);

    public static void NET_Flush(FileStream mfs)
    {
        mfs.Flush();
        IntPtr handle = mfs.SafeFileHandle.DangerousGetHandle();

        if (!FlushFileBuffers(handle))
            throw new System.ComponentModel.Win32Exception();
    }
#endif

以下是添加输入行的外观：

function customSort(array $array)
{
    // Iterate through and sort second level array by most recent date
    foreach ($array as $key => &$value) {
        usort($value, function ($a, $b) {
            return strtotime($a['latest_user_activity_date']) < strtotime($b['latest_user_activity_date']) ? 1 : -1;
        });
    }

    // Sort first level array by date descending of first (most recent) entry
    uasort($array, function ($a, $b) {
        return strtotime($a[0]['latest_user_activity_date']) < strtotime($b[0]['latest_user_activity_date']) ? 1 : -1;
    });

    return $array;
}

有没有办法保持列的宽度相同，所以它们不会调整大小和增大范围，因为当我希望它保持与没有时相同的大小时，表格会扩大输入行在底部。

Answer 1

为Width:100%;

指定select

＆＃13;

＆＃13;

select{
width:100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-hover table-bordered">
  <thead>
    <th width=15%>Product No</th>
    <th width=25%>Product Name</th>
    <th width=5%>Stage</th>
    <th width=15%>Stage Name</th>
    <th width=5%>Day</th>
    <th width=5%>Time</th>
    <th width=5%>Total</th>
    <th width=20%>Memo</th>
    <th width=5%>Activity</th>
  </thead>
  <tbody>

    <tr id="1686178">
      <td>34521</td>
      <td>Block A</td>
      <td>12</td>
      <td>Start</td>
      <td>Mon</td>
      <td>7</td>
      <td>2</td>
      <td></td>
      <td></td>
    </tr>

    <tr id="1686179">
      <td>63212</td>
      <td>Sports Field</td>
      <td>05</td>
      <td>Middle</td>
      <td>Fri</td>
      <td>1</td>
      <td>8</td>
      <td></td>
      <td></td>
    </tr>



    <tr>
      <td><select name="ProjectNumber">
			<option value=""></option> 
			<option value="34521">Block A</option><option value="63212">Sports Field</option><option value="985214">Underground Car Park</option><option value="521478">Main Campus Library</option>    
          </select></td>
      <td id="ProjectName"></td>
      <td id="ProjectPhases"></td>
      <td></td>
      <td><select name="Date">
	        <option value=""></option>            
	        			<option value="Mon">Mon</option>
			            <option value="Tue">Tue</option>
			            <option value="Wed">Wed</option>
			            <option value="Thu">Thu</option>
			            <option value="Fri">Fri</option>
			            <option value="Sat">Sat</option>
			            <option value="Sun">Sun</option>
			          </select></td>
      <td><input type="text" name="Time"></td>
      <td></td>
      <td><input type="text" name="Notes"></td>
      <td></td>
    </tr>

    <tr>
      <td colspan="9">
        <button type="reset" class="btn">Reset</button>
        <button type="submit" class="btn btn-success">Save</button>
      </td>
    </tr>

  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;