如何在表格列的每個主標題之后將右側邊框線添加到右側
[英]How can I add right side border line to the right side after each main heading of table column
問題描述
我試圖在從主標題到行尾的每一列的右側給出一條邊界線。 目前，即使 position 是對的，用戶也會混淆每個輸入框和復選框與哪一列相關。 只想在每個列標題之后給出一條窄邊框線，該線將幫助用戶識別與哪一列相關的數據。 該行應該從每個標題到相應數據列的末尾這是代碼
,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"> <table id="attendance" class="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> </html>
1 個解決方案
解決方案1
0 已采納 2021-05-20 03:09:49
我認為，如果您想輕松區分它們，通常可以執行以下操作。
粗體邊框。
更改列的顏色。
增加列之間的空間。
例子：
table {
border-spacing: 10px 0;
}
th,
td {
text-align: center;
font: smaller;
height: 40px;
border: 1px solid green;
width: 25%;
}
我如何添加另一個div來覆蓋.left，.mid和.right右側的所有空間？
[英]how can i add another div which will cover all the space present in the right side of .left, .mid and .right?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.