0

I use the following css to make the width of each table column to fit the width of the widest cell in that column (of course, I can't use table-layout:fixed in such case):

.fit {
    white-space: nowrap;
    width: 1%;   
}

Now, I have a case where a cell content may be changed dynamically, and the changed content may be longer the original.

In such a case, is it possible to keep the original width of the column that holds the changed cell? The part of the content that "overflows" should be hidden.

E.g., in the following example (here's also a fiddle), when the button is clicked and the content of the last cell is changed to a longer text, I'd like to keep the original width of the last column:

$('#button').click(ChagneLastWord);

function ChagneLastWord() {
  var lastCell = $("#myTable tr").first().find("td").last();
  lastCell.text("loooooooooooooooooooooooooooooooooooooooooooooooong word");
}
table {
  width: 100%;
}

td {
    text-align: center; 
    vertical-align: middle;
    white-space: nowrap; 
}

.fit {
    white-space: nowrap;
    width: 1%;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button">ChangeLastWord</button>
<div id="tableWrapper">    
    <table id="myTable" class="fit">
      <tr>
        <td>some</td>
        <td>nice</td> 
        <td>word</td>
      </tr>
      <tr>
        <td>some</td>
        <td>nice</td> 
        <td>word</td>
      </tr>
    </table>
</div>
OfirD
  • 9,442
  • 5
  • 47
  • 90
  • related : https://stackoverflow.com/questions/30303351/how-to-wrap-table-cell-at-a-maximum-width-in-full-width-table/30303676#30303676 – dippas Oct 15 '17 at 14:49

5 Answers5

1

Have you tried using jquery to calculate the width (since it's dynamically set with %) and set fixed max-width and add overflow: hidden and white-space: nowrap to ".fit td"? You can also add text-overflow: ellipsis for a nicer cutting of text.

$('#button').click(ChagneLastWord);
function ChagneLastWord() {
  var lastCell = $("#myTable tr").first().find("td").last();
  lastCell.text("loooooooooooooooooooooooooooooooooooooooooooooooong word");
}
var fit_width = $('.fit td').width();
$('.fit td').css('max-width', fit_width + 'px');
table {
  width: 100%;
}

td {
    text-align: center; 
    vertical-align: middle;
    white-space: nowrap; 
}

.fit {
    width: 1%;
    white-space: nowrap;
}
.fit td {
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button">ChangeLastWord</button>
<div id="tableWrapper">    
    <table id="myTable" class="fit">
      <tr>
        <td>some</td>
        <td>nice</td> 
        <td>word</td>
      </tr>
      <tr>
        <td>some</td>
        <td>nice</td> 
        <td>word</td>
      </tr>
    </table>
</div>
Morphy
  • 146
  • 7
0

I think I found the solution to your problem. You need to limit the contents of the TD in the table with another element and then set the previous width with javascript.

$('#button').click(ChagneLastWord);

function ChagneLastWord() {
  var lastCell = $("#myTable tr").first().find("td").last();
  width = lastCell.width();
  lastCell.html("<span>looooooooooooooooooooooooooooooooooooooong word</span>").children('span').attr("style","white-space: nowrap; width: "+width+"px; overflow:hidden; text-overflow:ellipsis; display:inline-block;");
}
table {
  width: 100%;
}

td {
    text-align: center; 
    vertical-align: middle;
    white-space: nowrap; 
}

.fit {
    white-space: nowrap;
    width: 1%;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">ChangeLastWord</button>
<div id="tableWrapper">    
    <table id="myTable" class="fit">
      <tr>
        <td><span>some</span></td>
        <td><span>nice</span></td> 
        <td><span>word</span></td>
      </tr>
      <tr>
        <td><span>some</span></td>
        <td><span>nice</span></td> 
        <td><span>word</span></td>
      </tr>
    </table>
</div>

Of course, it would be better if you change the CSS with a class name.

DreamWave
  • 1,934
  • 3
  • 28
  • 59
0

Well, I think you need a div as a helper for you inside a td with a specific width/height based on your needs.

Check this snippet, hope this helps you out.

table, th, td {
  border: 1px solid #c1c1c1;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

/*
* Change the width/height as you want
* Keep it "overflow-y: scroll" to scroll vertfically, if you want to scroll it horizontally, change it to "overflow-x: scroll" , it depends on your needs
*/
table div {
  width: 300px;
  height: 50px;
  overflow-y: scroll;
}
<table>
  <thead>
    <tr>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
      </td>
    </tr>
  </tbody>
</table>
Elharony
  • 886
  • 8
  • 18
0

This should work without using extra div:

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
td {
    width: 25%;
}

https://jsfiddle.net/hpd57u2h/

I edited your code in my exemple just to make it clearer, the process is the same anyway. I'd add also an ellipse to better clarify to the user that some text has been cut away...

text-overflow: ellipsis;
holden
  • 1,721
  • 12
  • 19
  • You omitted the `fit` class, and so missed the first part of my question, where I said I wanted "to make the width of each table column to fit the width of the widest cell in that column". – OfirD Oct 23 '17 at 21:17
0

I think you shuld just convert width value from percent to pixels

Oussidi Mohamed
  • 89
  • 5