Align overflow text and icon inside table cells

Question

I created a sortable HTML column table as follows:

.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 {
}







  
    
    Edit
    Request No. 
    Employee ID 
    Employee Name  
    For Family 
    Request Date 
    Editable Example 
    Total Amount 
    Details
    Approval History 
  
  
    
    
    REI/TRA/04/005 
    EMP004
    I Putu Yudi Haryasa
    0
    04 May 2018
    
      
      
      
        
        
      
    
    300,000.00
    See details
    See approvals
  
  
    
    
    REI/MED/04/004
    EMP005
    Daniel Giovanni Gunawan
    0
    04 May 2018
    
      
      
      
        
        
      
    
    550,000.00
    See details
    See approvals
  
  
    
    
    REI/MED/04/003 
    EMP006
    Muhammad Nadzeri Munawar
    1
    03 May 2018
    
      
      
      
        
        
      
    
    4,500,000.00
    See details
    See approvals
  
  
    
    
    REI/MED/03/002 
    EMP007
    Glenn Kristanto
    1
    02 May 2018
    
      
      
      
        
        
      
    
    3,000,000.00
    See details
    See approvals
  
  
    
    
    REI/TRA/03/001 
    EMP008
    Hendryanto Fudiko
    0
    02 May 2018
    
      
      
      
        
        
      
    
    150,000.00
    See details
    See approvals
  
  
    
    
    REI/TRA/02/001 
    EMP004
    I Putu Yudi Haryasa
    0
    28 Apr 2018
    
      
      
      
        
        
      
    
    300,000.00
    See details
    See approvals
  
  
    
    
    REI/MED/01/005
    EMP021
    Daniel Widjaja
    0
    25 Apr 2018
    
      
      
      
        
        
      
    
    550,000.00
    See details
    See approvals
  
  
    
    
    REI/MED/01/004 
    EMP020
    Faris Kurniawan
    1
    25 Apr 2018
    
      
      
      
        
        
      
    
    4,500,000.00
    See details
    See approvals
  
  
    
    
    REI/ENT/01/002 
    EMP015
    Romy Kusuma
    1
    11 Apr 2018
    
      
      
      
        
        
      
    
    3,000,000.00
    See details
    See approvals
  
  
    
    
    REI/ENT/01/001 
    EMP006
    Muhammad Nadzeri Munawar
    0
    09 Apr 2018
    
      
      
      
        
        
      
    
    150,000.00
    See details
    See approvals

As you can see, the title row icons automatically in-line aligned like this:

Is there any way to place the sort icon like this? So the text still can be overflow vertically, but the icon stay in place centered vertically directly beside the text? I tried to place the text and the icon in inline-block, but then the icon will move below the text. I also tried placing the icon absolute toward the text but I'm not really sure how to do that while maintaining the size of my title cells.

Is there any way to achieve this? Any help appreciated!

Align overflow text and icon inside table cells

Answers (1)

Related Questions