[英]How to make these fixed cols' width on a Bootstrap 4.0 table-responsive?
I've been trying to get this one to work based on similar questions/answers, but no success.我一直试图让这个基于类似的问题/答案工作,但没有成功。
This is my attempt to fix the col width by explicitly setting each column's width, but nothing changes!这是我尝试通过显式设置每列的宽度来修复 col 宽度,但没有任何改变!
<thead style="white-space: nowrap">
<tr>
<th style="width: 1%" class="text-center">ClientID</th>
<th style="width: 2%" class="text-center">Task Nº</th>
<th style="width: 25%" class="text-center">Task</th>
<th style="width: 4%" class="text-center">Date Assigned</th>
<th style="width: 4%" class="text-center">Link To File</th>
<th style="width: 22%" class="text-center">Notes</th>
<th style="width: 14%" class="text-center">Approval</th>
<th style="width: 26%" class="text-center">Comments</th>
</tr>
</thead>
Here's the Fiddle if you feel like giving a hand.如果您想伸出援手,这就是小提琴。 Thank you!谢谢!
Here's这里是
In the fiddle the row in table body has inline css that makes the column width same for all - at 160px.在小提琴中,表格主体中的行具有内联 css,使所有列的宽度相同 - 为 160 像素。 You need to remove that.你需要删除它。 You can use class col-1 etc to specify table column width.您可以使用 class col-1 等来指定表格列宽。
<div id="search-results" class="table-responsive">
<table class="table table-sm table-striped" id="dtable" style="font-size:0.9em">
<thead style="white-space: nowrap">
<tr>
<th class="text-center col-1">ClientID</th>
<th class="text-center col-1">Task Nº</th>
<th class="text-center col-2">Task</th>
<th class="text-center col-1">Date Assigned</th>
<th class="text-center col-1">Link To File</th>
<th class="text-center col-1">Notes</th>
<th class="text-center col-2">Approval</th>
<th class="text-center col-3">Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle" style="word-wrap: break-word;text-align:center">AA001</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">4</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">Review and approve content recommendations</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">5/19/2022</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">fafdaa</td>
<td class="text-center" style="align-middle"><select class="text-center" name="D1" style="border-radius: 0.2rem">
<option value="empty"></option>
<option value="Approved">Approved</option>
<option value="Discuss">Discuss</option>
<option value="Rejected">Rejected</option>
</select></td>
<td><input type="text" name="comments" style="width:99%;"></td>
</tr>
</tbody>
</table>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.