如何在 table 列的每个主标题之后向右侧添加右侧边框线

Question

我正在尝试在从主标题到行尾的每一列的右侧添加一条边框线。目前，即使位置正确，用户也会混淆每个输入框和复选框与什么列相关。只想在每个列标题后给出一条窄边框线，该线将帮助用户识别与哪一列相关的数据。该行应该从每个标题到相应数据列的末尾这是代码

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

Answer 1

我想如果你想轻松区分它们，一般来说，你可以这样做。

粗体边框。
更改列的颜色。
增加列之间的space。

示例：

table {
border-spacing: 10px 0;
}
  th,
  td {
  text-align: center;
  font: smaller;
  height: 40px;
  border: 1px solid green;
  width: 25%; 
}

http://jsfiddle.net/to4jwu72/3/

如何在 table 列的每个主标题之后向右侧添加右侧边框线

How can I add right side border line to the right side after each main heading of table column

html

asp.net-core

twitter-bootstrap-3