在表格单元格内对齐溢出文本和图标

Question

我创建了一个可排序的HTML列表，如下所示：

 .dashed-wrapper { padding-bottom: 48px; } table.table-generic { border-spacing:0; border-collapse: collapse; font-size: 13px; display: block; overflow-x: scroll; color: #333; margin-left: 50%; transform: translateX(-50%); width: 1100px; background-color: #fff; } .table-generic tr { } .table-generic tr.first-row { border-bottom: solid 2px #D1D1D1; cursor: default; } .table-generic tr.first-row:hover { background: #fff; } .table-generic td, th { text-align: left; padding-left: 12px; padding-right: 12px; } .table-generic tr.selectable-row:hover { background-color: #f1f1f1; transition: background-color 0.2s; } .table-generic th { font-weight: 700; } .alternate-bg { background-color: #f8f8f8; } .selected-bg, .selected-bg:hover { background-color: #D0F3FF !important; outline: solid 1px #fff !important; transition: background-color 0.2s; } .table-generic td.icon { text-align: center; padding-left: 0; } i { font-size: 13px; color: #aaa; cursor: pointer; } .icon i:hover { color: #00c983; } .table-sort i { margin-left: 8px; display: inline; } .money { text-align: right !important; } .history a { color: #0099ff; text-decoration: underline; } button { height: 32px; width: 48px; margin-right: 4px; border-radius: 3px; border: none; box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15); } button i { color: #fff; line-height: 20px !important; } .green { background-color: #00c983; } .red { background-color: #FF7979; } .table-action { padding-left: 6px; padding-right: 6px; text-align: center; } th.table-action .checkbox { transform: translateX(-6px); } .table-action input { opacity: 0; position: relative; } .checkbox { width: 16px; height: 16px; border: solid 1px #D1D1D1; border-radius: 2px; display: inline-block; margin-left: -32px; margin-top: 4px; cursor: pointer; transition: border 0.4s; } .checkbox-checked { border: solid 1px #00c983; margin-top: 2px; transition: border 0.4s; } .checkbox-input { cursor: pointer; } .checkbox i { color: #00c983; display: none; } .checkbox i:hover { color: #00c983; } .table-generic th:first-child, .table-generic td:first-child { padding-left: 24px; } #table1 th:first-child, #table1 td:first-child { padding-left: 40px; padding-right: 0; } .table-generic td:last-child { padding-right: 24px; } .table-action-last { padding-right: 16px; cursor: pointer; text-align: center; } th.table-action-last { cursor: default; } .table-sort { cursor: pointer; } .table-pagination { width: 100%; display: block; } .table-pagination-btn i { color: #333; } .table-pagination-btn { display: flex; float: right; height: 38px; border: solid 1px #D1D1D1; border-radius: 3px; } .table-pagination-btn-each { line-height: 38px; width: 38px; display: inline-block; text-align: center; border-left: solid 1px #D1D1D1; font-size: 12px; cursor: pointer; } .table-pagination-btn-each:first-child { border-left: transparent; } .table-pagination-btn-each:hover { background-color: #f8f8f8; transition: background-color 0.2s; } .table-pagination-btn-each i { font-size: 8px; transform: translateY(-1px); } .table-pagination-btn-each.selected-page { background-color: #00c983; font-weight: 700; color: #fff; cursor: default; } .pagination-disabled, .pagination-disabled:hover { cursor: default; color: #aaa; background-color: #fff; } .pagination-disabled i { cursor: default; color: #aaa; } .table-generic td .yes-no { color: #333; cursor: default; } .table-generic td .fa-minus { font-size: 8px; } .yes-no-cell { text-align: center !important; padding-right: 32px !important; color: transparent; } .table-generic td .input-text { height: 30px; margin-bottom: 0; width: 118px; background-color: #fff; } .input-amount { text-align: right; padding-right: 28px !important; } .input-amount-row { position: relative; } .spinner-table { top: 50% !important; right: 12px !important; transform: translateY(-50%) !important; } .table-view-link { color: #0099ff; font-weight: 700; text-decoration: none; } .table-view-link:hover { text-decoration: underline; } .spinner-up i, .spinner-down i { color: #777; } .spinner-up i:hover, .spinner-down i:hover { color: #00c983; } .spinner-down i { transform: translateY(-1px); } a:hover { color: #006BB3; } ::-webkit-scrollbar { -webkit-appearance: none; width: 8px; height: 8px; background-color: transparent; } ::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(0,0,0,.15); } .table-caption { margin-top: 24px; } td .fa-check { margin-left: 1.5px; } #table2 td { white-space: nowrap; } .table-generic-btn-container { white-space: nowrap !important; } .table-generic-btn-container .table-btn { } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet"> <div class="dashed-wrapper"> <table class="table-generic" id="table1" data-shrinked="0" data-expanded="0"> <tr class="first-row"> <th class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></th> <th class="table-action table-action-last">Edit</th> <th class="table-sort" id="req-no">Request No.<i class="fas fa-sort"></i></th> <th class="table-sort" id="emp-id">Employee ID<i class="fas fa-sort"></i></th> <th class="table-sort" id="emp-name">Employee Name<i class="fas fa-sort"></i></th> <th class="table-sort" id="fam-member">For Family<i class="fas fa-sort"></i></th> <th class="table-sort" id="req-date">Request Date<i class="fas fa-sort"></i></th> <th>Editable Example</th> <th>Total Amount</th> <th>Details</th> <th>Approval History</th> </tr> <tr class="selectable-row"> <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td> <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td> <td>REI/TRA/04/005</td> <td>EMP004</td> <td class="overflow-content">I Putu Yudi Haryasa</td> <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td> <td>04 May 2018</td> <td class="input-amount-row"> <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00"> <a /> <div class="spinner-group amount-spinner-group spinner-table"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </td> <td class="money">300,000.00</td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td> </tr> <tr class="selectable-row"> <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td> <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td> <td>REI/MED/04/004</td> <td>EMP005</td> <td class="overflow-content">Daniel Giovanni Gunawan</td> <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td> <td>04 May 2018</td> <td class="input-amount-row"> <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00"> <a /> <div class="spinner-group amount-spinner-group spinner-table"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </td> <td class="money">550,000.00</td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td> </tr> <tr class="selectable-row"> <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td> <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td> <td>REI/MED/04/003</td> <td>EMP006</td> <td class="overflow-content">Muhammad Nadzeri Munawar</td> <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td> <td>03 May 2018</td> <td class="input-amount-row"> <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00"> <a /> <div class="spinner-group amount-spinner-group spinner-table"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </td> <td class="money">4,500,000.00</td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td> </tr> <tr class="selectable-row"> <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td> <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td> <td>REI/MED/03/002</td> <td>EMP007</td> <td class="overflow-content">Glenn Kristanto</td> <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td> <td>02 May 2018</td> <td class="input-amount-row"> <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00"> <a /> <div class="spinner-group amount-spinner-group spinner-table"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </td> <td class="money">3,000,000.00</td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td> </tr> <tr class="selectable-row"> <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td> <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td> <td>REI/TRA/03/001</td> <td>EMP008</td> <td class="overflow-content">Hendryanto Fudiko</td> <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td> <td>02 May 2018</td> <td class="input-amount-row"> <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00"> <a /> <div class="spinner-group amount-spinner-group spinner-table"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </td> <td class="money">150,000.00</td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td> </tr> <tr class="selectable-row"> <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td> <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td> <td>REI/TRA/02/001</td> <td>EMP004</td> <td class="overflow-content">I Putu Yudi Haryasa</td> <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td> <td>28 Apr 2018</td> <td class="input-amount-row"> <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00"> <a /> <div class="spinner-group amount-spinner-group spinner-table"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </td> <td class="money">300,000.00</td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td> </tr> <tr class="selectable-row"> <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td> <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td> <td>REI/MED/01/005</td> <td>EMP021</td> <td class="overflow-content">Daniel Widjaja</td> <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td> <td>25 Apr 2018</td> <td class="input-amount-row"> <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00"> <a /> <div class="spinner-group amount-spinner-group spinner-table"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </td> <td class="money">550,000.00</td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td> </tr> <tr class="selectable-row"> <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td> <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td> <td>REI/MED/01/004</td> <td>EMP020</td> <td class="overflow-content">Faris Kurniawan</td> <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td> <td>25 Apr 2018</td> <td class="input-amount-row"> <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00"> <a /> <div class="spinner-group amount-spinner-group spinner-table"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </td> <td class="money">4,500,000.00</td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td> </tr> <tr class="selectable-row"> <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td> <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td> <td>REI/ENT/01/002</td> <td>EMP015</td> <td class="overflow-content">Romy Kusuma</td> <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td> <td>11 Apr 2018</td> <td class="input-amount-row"> <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00"> <a /> <div class="spinner-group amount-spinner-group spinner-table"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </td> <td class="money">3,000,000.00</td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td> </tr> <tr class="selectable-row"> <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td> <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td> <td>REI/ENT/01/001</td> <td>EMP006</td> <td class="overflow-content">Muhammad Nadzeri Munawar</td> <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td> <td>09 Apr 2018</td> <td class="input-amount-row"> <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00"> <a /> <div class="spinner-group amount-spinner-group spinner-table"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </td> <td class="money">150,000.00</td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td> <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td> </tr> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

如您所见，标题行图标会自动对齐，如下所示：

有什么办法可以放置排序图标吗？ 因此，文本仍然可以在垂直方向上溢出，但是图标是否保持在文本正上方垂直居中的位置？ 我试图将文本和图标放在内联块中，但是图标将移动到文本下方。 我也尝试将图标绝对放置在文本上，但是我不确定在保持标题单元格大小的同时该怎么做。

有什么办法可以做到这一点？ 任何帮助表示赞赏！

Answer 1

如果要获得更多的样式自由，则可能需要使用表格以外的其他方式。 从本质上说，表格的样式设计能力受到限制。

我能看到的完成这项工作的唯一方法是超级 hacky，不建议这样做。 没有快速解决方案。 您必须使用CSS设置每个图标的样式。 您需要为每个添加一个特定的类。 我添加了班级id

<th class="table-sort id" id="emp-id">Employee ID<i class="fas fa-sort"></i></th>

然后，您可以为该图标添加特定的样式：

.table-sort.id i {
  display: inline;
  position: absolute;
  margin-left: 50px;
  margin-top: -7px;
}

不过，您必须为每个图标执行此操作，因此，根据您拥有多少张表，这可能是可行的或可能不是可行的选择。

在这里工作的小提琴（仅在上述元素上）