当我缩小屏幕时，某些列文本在 Td 元素内不可见
Posted
技术标签:
【中文标题】当我缩小屏幕时，某些列文本在 Td 元素内不可见【英文标题】：When I reduce the screen , some column text is not visible inside the Td element 【发布时间】：2021-08-09 18:16:42 【问题描述】：我在 responsive-table div 标记中使用 html 表。有带十进制数字的数字列。但是当我将页面大小减小到更小的屏幕时，数值的某些部分是不可见的。但是当我拖入它的原始大小时就可以看到了。如何让它在小屏幕和大屏幕中显示表格列中的所有值。
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$('#attendance').DataTable();
</script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">!DOCTYPE html>
<style>
table,
th,
td
text-align: center;
font: smaller;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
-webkit-appearance: none;
margin: 0;
div.showinline
display: flex;
align-items: center;
</style>
<html lang="en">
<div class="table-responsive">
<table id="attendance" class="table cell-border dataTable no-footer" style="width: 100%;" role="grid" aria-describedby="attendance_info">
<thead class="thead-light">
<tr role="row">
<td rowspan="1" colspan="1"></td>
<td style="width:16.66%" rowspan="1" colspan="1">Employee</td>
<td style="text-align:center;vertical-align:middle; " rowspan="1" colspan="1">Normal Attendance</td>
<td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Scheduled DayOff</td>
<td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Holiday</td>
<td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">ShiftDay</td>
<td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Other</td>
<td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Sick</td>
<td colspan="2" style="text-align:center;vertical-align:middle;" rowspan="1">Time off</td>
<td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Extra Time</td>
<td style="text-align:center;vertical-align:middle;width:250px" rowspan="1" colspan="1">Comment</td>
</tr>
<tr role="row">
<td class="sorting_asc" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-sort="ascending" aria-label=": activate to sort column descending" style="width: 1px;"></td>
<td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label=": activate to sort column ascending" style="width: 61px;"></td>
<td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending" style="width: 72px;">Time</td>
<td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending" style="width: 66px;">Time</td>
<td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending" style="width: 47px;">Time</td>
<td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending" style="width: 55px;">Time</td>
<td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending" style="width: 59px;">Time</td>
<td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending" style="width: 39px;">Time</td>
<td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending" style="width: 39px;">Time</td>
<td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Salary Deduct: activate to sort column ascending" style="width: 45px;">Salary Deduct</td>
<td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label=": activate to sort column ascending" style="width: 32px;"></td>
<td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label=": activate to sort column ascending" style="width: 62px;"></td>
</tr>
</thead>
<tbody>
<tr style="background-color:#90EE90" role="row" class="odd">
<td class="sorting_1">
<input type="hidden" data-val="true" data-val-required="The LogID field is required." id="attendanceLogList_0__LogID" name="attendanceLogList[0].LogID" value="197211">
<input type="hidden" data-val="true" data-val-required="The IsProtected field is required." id="attendanceLogList_0__IsProtected" name="attendanceLogList[0].IsProtected" value="True">
</td>
<td style="width:10%">Employee1</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" checked="checked" data-val="true" data-val-required="The IsNormalAttendance field is required."
id="attendanceLogList_0__IsNormalAttendance" name="attendanceLogList[0].IsNormalAttendance" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field NormalHrs must be a number." data-val-required="The NormalHrs field is required."
id="attendanceLogList_0__NormalHrs" name="attendanceLogList[0].NormalHrs" value="3.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsDayOffMarked field is required."
id="attendanceLogList_0__IsDayOffMarked" name="attendanceLogList[0].IsDayOffMarked" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field DayOffHrs must be a number." data-val-required="The DayOffHrs field is required."
id="attendanceLogList_0__DayOffHrs" name="attendanceLogList[0].DayOffHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsHolidayMarked field is required."
id="attendanceLogList_0__IsHolidayMarked" name="attendanceLogList[0].IsHolidayMarked" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field HolidayHrs must be a number." data-val-required="The HolidayHrs field is required."
id="attendanceLogList_0__HolidayHrs" name="attendanceLogList[0].HolidayHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsFurlough field is required."
id="attendanceLogList_0__IsFurlough" name="attendanceLogList[0].IsFurlough" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field FurloughHrs must be a number." data-val-required="The FurloughHrs field is required."
id="attendanceLogList_0__FurloughHrs" name="attendanceLogList[0].FurloughHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsMaternityLeave field is required."
id="attendanceLogList_0__IsMaternityLeave" name="attendanceLogList[0].IsMaternityLeave" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field MaternityHrs must be a number." data-val-required="The MaternityHrs field is required."
id="attendanceLogList_0__MaternityHrs" name="attendanceLogList[0].MaternityHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" checked="checked" data-val="true" data-val-required="The IsSickMarked field is required."
id="attendanceLogList_0__IsSickMarked" name="attendanceLogList[0].IsSickMarked" value="true">
</span>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field SickHrs must be a number." data-val-required="The SickHrs field is required."
id="attendanceLogList_0__SickHrs" name="attendanceLogList[0].SickHrs" value="4.30">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsTimeOff field is required."
id="attendanceLogList_0__IsTimeOff" name="attendanceLogList[0].IsTimeOff" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field TimeOffHrs must be a number." data-val-required="The TimeOffHrs field is required."
id="attendanceLogList_0__TimeOffHrs" name="attendanceLogList[0].TimeOffHrs" value="0.00">
</div>
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field ExtraTimeHrs must be a number." data-val-required="The ExtraTimeHrs field is required."
id="attendanceLogList_0__ExtraTimeHrs" name="attendanceLogList[0].ExtraTimeHrs" value="0.00">
</td>
<td class="text">
<input type="text" readonly="readonly" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control" id="attendanceLogList_0__Remark" name="attendanceLogList[0].Remark" value="ssdf">
</td>
</tr>
<tr style="background-color:#FFBF00" role="row" class="even">
<td class="sorting_1">
<input type="hidden" data-val="true" data-val-required="The LogID field is required." id="attendanceLogList_1__LogID" name="attendanceLogList[1].LogID" value="0">
<input type="hidden" data-val="true" data-val-required="The IsProtected field is required." id="attendanceLogList_1__IsProtected" name="attendanceLogList[1].IsProtected" value="False">
</td>
<td style="width:10%">Employee2</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsNormalAttendance field is required."
id="attendanceLogList_1__IsNormalAttendance" name="attendanceLogList[1].IsNormalAttendance" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text" data-val="true" data-val-number="The field NormalHrs must be a number." data-val-required="The NormalHrs field is required."
id="attendanceLogList_1__NormalHrs" name="attendanceLogList[1].NormalHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsDayOffMarked field is required."
id="attendanceLogList_1__IsDayOffMarked" name="attendanceLogList[1].IsDayOffMarked" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text" data-val="true" data-val-number="The field DayOffHrs must be a number." data-val-required="The DayOffHrs field is required."
id="attendanceLogList_1__DayOffHrs" name="attendanceLogList[1].DayOffHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" data-val="true" data-val-required="The IsHolidayMarked field is required." id="attendanceLogList_1__IsHolidayMarked"
name="attendanceLogList[1].IsHolidayMarked" value="true">
</span>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text" data-val="true" data-val-number="The field HolidayHrs must be a number." data-val-required="The HolidayHrs field is required."
id="attendanceLogList_1__HolidayHrs" name="attendanceLogList[1].HolidayHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" data-val="true" data-val-required="The IsFurlough field is required." id="attendanceLogList_1__IsFurlough"
name="attendanceLogList[1].IsFurlough" value="true">
</span>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text" data-val="true" data-val-number="The field FurloughHrs must be a number." data-val-required="The FurloughHrs field is required."
id="attendanceLogList_1__FurloughHrs" name="attendanceLogList[1].FurloughHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" data-val="true" data-val-required="The IsMaternityLeave field is required." id="attendanceLogList_1__IsMaternityLeave"
name="attendanceLogList[1].IsMaternityLeave" value="true">
</span>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text" data-val="true" data-val-number="The field MaternityHrs must be a number." data-val-required="The MaternityHrs field is required."
id="attendanceLogList_1__MaternityHrs" name="attendanceLogList[1].MaternityHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" data-val="true" data-val-required="The IsSickMarked field is required." id="attendanceLogList_1__IsSickMarked"
name="attendanceLogList[1].IsSickMarked" value="true">
</span>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text" data-val="true" data-val-number="The field SickHrs must be a number." data-val-required="The SickHrs field is required."
id="attendanceLogList_1__SickHrs" name="attendanceLogList[1].SickHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" data-val="true" data-val-required="The IsTimeOff field is required." id="attendanceLogList_1__IsTimeOff"
name="attendanceLogList[1].IsTimeOff" value="true">
</span>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text" data-val="true" data-val-number="The field TimeOffHrs must be a number." data-val-required="The TimeOffHrs field is required."
id="attendanceLogList_1__TimeOffHrs" name="attendanceLogList[1].TimeOffHrs" value="0.00">
</div>
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text" data-val="true" data-val-number="The field ExtraTimeHrs must be a number." data-val-required="The ExtraTimeHrs field is required."
id="attendanceLogList_1__ExtraTimeHrs" name="attendanceLogList[1].ExtraTimeHrs" value="0.00">
</td>
<td class="text">
<input type="text" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control" id="attendanceLogList_1__Remark" name="attendanceLogList[1].Remark" value="">
</td>
</tr>
<tr style="background-color:#90EE90" role="row" class="odd">
<td class="sorting_1">
<input type="hidden" data-val="true" data-val-required="The LogID field is required." id="attendanceLogList_2__LogID" name="attendanceLogList[2].LogID" value="197210">
<input type="hidden" data-val="true" data-val-required="The IsProtected field is required." id="attendanceLogList_2__IsProtected" name="attendanceLogList[2].IsProtected" value="True">
</td>
<td style="width:10%">Employee3</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" checked="checked" data-val="true" data-val-required="The IsNormalAttendance field is required."
id="attendanceLogList_2__IsNormalAttendance" name="attendanceLogList[2].IsNormalAttendance" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field NormalHrs must be a number." data-val-required="The NormalHrs field is required."
id="attendanceLogList_2__NormalHrs" name="attendanceLogList[2].NormalHrs" value="7.30">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsDayOffMarked field is required."
id="attendanceLogList_2__IsDayOffMarked" name="attendanceLogList[2].IsDayOffMarked" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field DayOffHrs must be a number." data-val-required="The DayOffHrs field is required."
id="attendanceLogList_2__DayOffHrs" name="attendanceLogList[2].DayOffHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsHolidayMarked field is required."
id="attendanceLogList_2__IsHolidayMarked" name="attendanceLogList[2].IsHolidayMarked" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field HolidayHrs must be a number." data-val-required="The HolidayHrs field is required."
id="attendanceLogList_2__HolidayHrs" name="attendanceLogList[2].HolidayHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsFurlough field is required."
id="attendanceLogList_2__IsFurlough" name="attendanceLogList[2].IsFurlough" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field FurloughHrs must be a number." data-val-required="The FurloughHrs field is required."
id="attendanceLogList_2__FurloughHrs" name="attendanceLogList[2].FurloughHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsMaternityLeave field is required."
id="attendanceLogList_2__IsMaternityLeave" name="attendanceLogList[2].IsMaternityLeave" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field MaternityHrs must be a number." data-val-required="The MaternityHrs field is required."
id="attendanceLogList_2__MaternityHrs" name="attendanceLogList[2].MaternityHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsSickMarked field is required."
id="attendanceLogList_2__IsSickMarked" name="attendanceLogList[2].IsSickMarked" value="true">
</span>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field SickHrs must be a number." data-val-required="The SickHrs field is required."
id="attendanceLogList_2__SickHrs" name="attendanceLogList[2].SickHrs" value="0.00">
</div>
</td>
<td>
<div class="showinline">
<span>
<input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsTimeOff field is required."
id="attendanceLogList_2__IsTimeOff" name="attendanceLogList[2].IsTimeOff" value="true">
</span>
<input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field TimeOffHrs must be a number." data-val-required="The TimeOffHrs field is required."
id="attendanceLogList_2__TimeOffHrs" name="attendanceLogList[2].TimeOffHrs" value="0.00">
</div>
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text" data-val="true" data-val-number="The field ExtraTimeHrs must be a number." data-val-required="The ExtraTimeHrs field is required."
id="attendanceLogList_2__ExtraTimeHrs" name="attendanceLogList[2].ExtraTimeHrs" value="0.00">
</td>
<td class="text">
<input type="text" readonly="readonly" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control" id="attendanceLogList_2__Remark" name="attendanceLogList[2].Remark" value="">
</td>
</tr>
</tbody>
</table>
</div>
</html>【问题讨论】：
【参考方案1】：hi 我认为您需要在 css 上配置 @media 与微笑场景的大小我希望我的回答清楚且有帮助
【讨论】：
尝试检查元素，看看有什么不工作看上面我添加了一张图片【参考方案2】：将您的 inside 放在标签下方，这将使表格响应，这将允许水平较大的表格通过在移动屏幕上保持响应来滚动
<div class="table-responsive">
<table class="table"></table>
</div>
*注意：您还需要在表上添加引导表类以使其工作。
这里是文档的链接 https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables
【讨论】：
您是否尝试过将“table”类添加到表中？以上是关于当我缩小屏幕时，某些列文本在 Td 元素内不可见的主要内容，如果未能解决你的问题，请参考以下文章
选择内部 flex 元素时，文本选择背景在 Safari 中变得不可见