0

I have created a responsive table like this:

$(document).ready(function() {
  adjustPadding();
});

$(window).resize(function() {
  adjustPadding();
});

function adjustPadding() {
  $("td:not(.table-generic-btn-container):not(.input-amount-row):not(.table-action)").each(function() {
    var text = $(this).text();
    var padding = parseInt(($(this).css("padding-top")).slice(0,-2));
    if (padding <= 8) {
      $(this).css({"padding-top": "8px"});
      $(this).css({"padding-bottom": "8px"});
    }
  });
}
.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;
  height: 40px;
  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; 
}
<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="tall-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="tall-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="tall-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="tall-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="tall-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="tall-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="tall-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="tall-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="tall-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="tall-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>

As you can see, the text inside the table can be more than one line. When all the texts inside a row are in one line, I want to make the row height fixed to 40px. However, when any of the texts inside a row are more than one line, I want to add extra padding-top and padding-bottom to 8px.

I have an idea to iterate all the cell content height, and when I get the "tall" (more than one line) text, I set the padding to it so all the cells inside that row follow the height. However, my jquery attempt always get the cells' height which is 40px, not the content inside height. Also, I tried getting all the cells' padding-top since I can see the padding height difference between one line text cells and more than one line text cells. But it always results in 0.

Any help appreciated! :)

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Dolorosa
  • 573
  • 3
  • 10
  • 29

1 Answers1

1

Maybe you did not post all the code... Because that table isn't "responsive" at all.

But I got you issue. In fact, you need to detect when a cell's content has wrapped.
That ain't easy in a table cell, because the cell's height also depends on the other cell height in the same row.

Based on this other SO answer, I used a temporary "testDiv" appended to the end of the document, on which I applyed the cell's width. Then, like the other answer suggests, I append the content word by word and check the testDiv's height for a change. If there a height change while appending words, it obviously means a wrapping occured.

I only added this class to your CSS... I made no other change.

.test{
  background-color:orange;
}

Here is the code:

function adjustPadding() {

  // Create a test div and append it to the end of the document
  var testDiv = $("<div id='wrapTest'>");
  $("html").append($("<div id='wrapTest'>"));
  var testDiv = $("#wrapTest");

  // Loop the cells
  $("td:not(.table-generic-btn-container):not(.input-amount-row):not(.table-action)").each(function() {

    // Get the cell's content, splitted by the spaces
    var text = $(this).text().split(" ");
    // Get the cells width, including the padding
    var width = $(this).outerWidth();

    // If there's more than one word, test!
    if(text.length > 0){
      // Empty, set the width and add the first word
      testDiv.empty().css({"width":width}).append(text[0]);
      // Get the height
      var height = testDiv.height();

      // For each other words, compare the new height
      for(i=1;i<text.length;i++){
        testDiv.append(" "+text[i]);

        // If height increased, there's a wrap!
        if(testDiv.height() > height){
          $(this).addClass("test");

          // Do whatever you wish on those cells here!
          //$(this).css({"padding-top": "8px"});
          //$(this).css({"padding-bottom": "8px"});
        }
      }
    }  // End if length>0
  });  // End each

  // Remove the test div
  testDiv.remove();
}

Working demo on CodePen

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64