html - 表格中的下拉选择 - 移动视图问题

Question

我在表中下拉菜单的引导表中有问题。我在表格中添加了下拉菜单，但下拉菜单的大小在移动视图中不固定。下面是我的表格编码：

<table class="table table-striped table-bordered" style="width:100%;" id="add_files">
<thead>
<tr>
<th style="color:blue; text-align:center; width: 30%;">File Name</th>
<th style="color:blue; text-align:center; width: 10%;">Status</th>
<th style="color:blue; text-align:center; width: 10%;">File Size</th>
<th style="color:blue; text-align:center;">Type</th>
<th style="color:blue; text-align:center; width: 10%;">Action</th>
</tr>
</thead>
<tbody>

<tr id="add_fileID211114155757_32639_paneltoinsurance20210317104145" class="vpb_blue">
<td style="word-break: break-all"><div class="filename_size" style="white-space: pre-wrap;width:100%">211114155757_65515_paneltoinsurance20210317104145.pdf</div>
<input type="hidden" name="doc_files_new[]" value="211114155757_65515_paneltoinsurance20210317104145.pdf"></td><td style="text-align: center;">
<span id="uploading_211114155757_32639_paneltoinsurance20210317104145">
<span style="color:blue;">Pending</span></span></td>
<td style="text-align: center;">112KB</td>
<td style="word-break: break-all">
<select class="form-control required type_doc_211114155757_32639_paneltoinsurance20210317104145" id="type_doc" name="type_doc[]" value="" title="Type" onchange="get_doc_type(this.value, '211114155757_32639_paneltoinsurance20210317104145')" style="white-space: pre-wrap;width:100%">
<option value="5">Acciden</option>
<option value="42">Driving License (Car owner)</option>
<option value="44">Driving License (Driver)</option><option value="7">Full set of police report</option><option value="3">Photocopy of Car Insurance policy</option>
<option value="2">Photocopy of Car registration card</option><option value="38">Photocopy of IC (Car owner)</option>
<option value="43">Photocopy of IC (Driver)</option>
<option value="37">Photocopy of SSM, form 9, form 24, form 49,</option>
<option value="4">Police Slip and Police report (original copy)</option>
</select>
</td>
<td style="text-align: center;"><span id="remove211114155757_32639_paneltoinsurance20210317104145"><span class="vpb_files_remove_left_inner" onclick="vpb_remove_this_file('211114155757_32639_paneltoinsurance20210317104145','211114155757_65515_paneltoinsurance20210317104145.pdf');">Remove</span></span></td>
</tr>
</tbody>
</table>

然后移动视图结果如下所示：

如果原始非移动视图如下所示：

我正在尝试添加style="white-space: pre-wrap;width:100%"选择标签并添加trstyle="word-break: break-all" （用于选择标签），但在移动视图中设计不佳。

请问怎么设计下拉菜单放在桌子上好看？</p>

标签： htmlcsshtml-tablebootstrap-table