I have a problem in the bootstrap table for dropdrow menu in the table. I have added the dropdown in the table, but the dropdown size not fix in the mobile view. Below is my table coding:
<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>
Then the mobile view result is shown like below:
If original not mobile view is shown like below:
I am trying add style="white-space: pre-wrap;width:100%" in the select tag and add style="word-break: break-all" in the tr (for the select tag), but the design not well in the mobile view.
May I know how to design the dropdown menu to look good on the table？