html - 为什么填充在我的 JSF 数据表中不起作用？

Question

我不确定我做错了什么，但我的填充不起作用:

填充设置为父 div，溢出设置为隐藏。

代码:

<thead id="j_idt248-j_idt249_head">
   <tr role="row">
      <th id="j_idt248-j_idt249-j_idt251" class="ui-state-default ui-sortable-column ui-filter-column serviceTypeColumn" role="columnheader" aria-label="Request type: activate to sort column ascending" scope="col" tabindex="0" aria-sort="other"><span class="ui-column-title">Request type</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span><label id="j_idt248-j_idt249-j_idt251-filter_label" for="j_idt248-j_idt249-j_idt251-filter" class="ui-helper-hidden">Filter by Request type</label><input id="j_idt248-j_idt249-j_idt251-filter" name="j_idt248-j_idt249-j_idt251-filter" class="ui-column-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" value="" autocomplete="off" aria-labelledby="j_idt248-j_idt249-j_idt251-filter_label" role="textbox" aria-disabled="false" aria-readonly="false"></th>
      <th id="j_idt248-j_idt249-j_idt253" class="ui-state-default ui-sortable-column ui-filter-column originalServiceTypeColumn" role="columnheader" aria-label="Original service: activate to sort column ascending" scope="col" tabindex="0"><span class="ui-column-title">Original service</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span><label id="j_idt248-j_idt249-j_idt253-filter_label" for="j_idt248-j_idt249-j_idt253-filter" class="ui-helper-hidden">hidden</label><input id="j_idt248-j_idt249-j_idt253-filter" name="j_idt248-j_idt249-j_idt253-filter" class="ui-column-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" value="" autocomplete="off" aria-labelledby="j_idt248-j_idt249-j_idt253-filter_label" role="textbox" aria-disabled="false" aria-readonly="false"></th>
      <th id="j_idt248-j_idt249-j_idt255" class="ui-state-default ui-sortable-column ui-filter-column startTimeColumn" role="columnheader" aria-label="Start time: activate to sort column ascending" scope="col" tabindex="0"><span class="ui-column-title">Start time</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span><label id="j_idt248-j_idt249-j_idt255-filter_label" for="j_idt248-j_idt249-j_idt255-filter" class="ui-helper-hidden">Filter by Start time</label><input id="j_idt248-j_idt249-j_idt255-filter" name="j_idt248-j_idt249-j_idt255-filter" class="ui-column-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" value="" autocomplete="off" aria-labelledby="j_idt248-j_idt249-j_idt255-filter_label" role="textbox" aria-disabled="false" aria-readonly="false"></th>
      <th id="j_idt248-j_idt249-j_idt257" class="ui-state-default ui-filter-column" role="columnheader" aria-label="VIN" scope="col"><span class="ui-column-title">VIN</span><label id="j_idt248-j_idt249-j_idt257-filter_label" for="j_idt248-j_idt249-j_idt257-filter" class="ui-helper-hidden">Filter by VIN</label><input id="j_idt248-j_idt249-j_idt257-filter" name="j_idt248-j_idt249-j_idt257-filter" class="ui-column-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" value="" autocomplete="off" aria-labelledby="j_idt248-j_idt249-j_idt257-filter_label" role="textbox" aria-disabled="false" aria-readonly="false"></th>
   </tr>
</thead>

CSS:

    .ui-datatable-tablewrapper tr {
      padding: 0 4px;
    }
    

Answer 1

感谢 Lister 先生的提示。这就是我处理这种情况的方式，有点棘手但有效:

.ui-datatable-tablewrapper tr td:first-child {
    padding-left: 4px;
}

.ui-datatable-tablewrapper tr td:last-child {
    padding-right: 4px;
}