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

Question

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

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

这是没有最后输入/行的表格:

<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>
  </tbody>
</table>

下面是添加了输入行后的样子:

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

有没有办法保持列的宽度相同，这样它们就不会调整大小并变宽，因为当我希望它保持与没有时一样的大小时，这会使表的大小扩大底部的输入行。

Answer 1

为select指定Width:100%;

select{
width:100%;
}

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