Bootstrap表格内下拉菜单移动端视图显示异常适配咨询

使用Bootstrap开发表格时，在表格内嵌入下拉选择框后，移动端视图下下拉菜单尺寸无法适配，显示效果异常。已尝试给select标签添加style="white-space: pre-wrap;width:100%"属性、给下拉菜单所在td标签添加style="word-break: break-all"属性，仍未解决问题。

相关代码 #

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

效果展示 #

• 移动端异常效果：
• 桌面端正常效果：

• 方案一（改动最小）：给表格外层套上Bootstrap官方的.table-responsive响应式容器，移动端下表格可横向滚动，不会被强制压缩列宽导致下拉框变形：

<div class="table-responsive">
  <!-- 把原有table代码放在这个容器里即可 -->
</div>

• 方案二（适配下拉框自身属性）：新增CSS规则强制下拉框适配容器宽度，同时支持option文本换行：

#add_files select.form-control {
  width: 100% !important;
  min-width: 120px; /* 可根据实际业务调整最小宽度，避免过窄导致文本显示不全 */
}
#add_files select.form-control option {
  white-space: normal;
  word-wrap: break-word;
}

• 方案三（移动端体验最优）：针对小屏设备把表格转为卡片式布局，无需横向滚动：
  1. 先给每个td添加data-label属性，属性值对应当列的表头名称，比如Type列的td就写<td data-label="Type">
  2. 添加以下CSS规则：

@media screen and (max-width: 768px) {
  #add_files, #add_files tbody, #add_files tr, #add_files td {
    display: block;
    width: 100% !important;
  }
  #add_files thead {
    display: none;
  }
  #add_files tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }
  #add_files td {
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  #add_files td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 15px;
    font-weight: bold;
    text-align: left;
  }
}

内容的提问来源于stack exchange，提问作者David Holly