CODEWITHSUNDEEP
javascripthtmlcsshtml-table
sunhearth
sunhearth

Reputation: 93

How to set a maximum length to the characters displayed in a <td>

 document.querySelector('#emails-view').innerHTML=`
                <table id="emails-table" class="table table-hover">
                  <thead class="thead-dark">
                    <tr>
                      <th>To</th>
                      <th>Subject</th>
                      <th>Text</th>
                    </tr>
                  </thead>
                  <tbody id="table-body">
                  </tbody>
                </table>  
                `
    
                for(var i=0;i<emails.length;i++){
                  let row = document.createElement('tr');
                  let cols = '<td>' + emails[i].recipients + '</td><td>' + emails[i].subject + '</td><td style="width:50%;"> ' + emails[i].body + '</td>';
                  row.innerHTML = cols;
                  document.getElementById('table-body').appendChild(row);
                }

I'm creating an emails table with JS, and I would like to set a lenght limit to the email text, followed by "...", so that the text stands only in 1 row, and doesnt take 4 rows like in the image.

This is the table :

enter image description here

I tried by modify the <td> style in this:

<td style="width:50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">

but still doesnt works, this is what happen: enter image description here

How can I fix this? (I would like that the email text is the 50% of tha table width). Thank you!

Upvotes: 0

Views: 1958

Answers (3)

mofiroz
mofiroz

Reputation: 66

Try using:

str.substring(0,20)+"..."; }

It can solve your problem

Upvotes: 2

Kaddath
Kaddath

Reputation: 6151

If that doesn't bother to have "To" and "Subject" the same size, you can use a combination of style="width: 100%; table-layout:fixed;" on the table (all columns will have the same width) and colspan="2" on the "Text" td. (you need the same colspans on the th too)

<table id="emails-table" class="table table-hover" style="width: 100%; table-layout:fixed;" border="1">
  <thead class="thead-dark">
    <tr>
      <th>To</th>
      <th>Subject</th>
      <th colspan="2">Text</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <td>To</td>
      <td>Subject</td>
      <td colspan="2" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </td>
    </tr>
  </tbody>
</table>

You could have more "subdivisions" with colspan to adapt the size of "To" and "Subject" relatively (ex colspan colspan="3" on first td (width 3/8), colspan="1" on second (width 1/8) and colspan="4" on the last (width 4/8))

<table id="emails-table" class="table table-hover" style="width: 100%; table-layout:fixed;" border="1">
  <thead class="thead-dark">
    <tr>
      <th colspan="3">To</th>
      <th colspan="1">Subject</th>
      <th colspan="4">Text</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <td colspan="3">To</td>
      <td colspan="1">Subject</td>
      <td colspan="4" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Cem PEHLIVAN
Cem PEHLIVAN

Reputation: 139

<table style="width: 100%; border-collapse: collapse" border="1">
  <thead>
    <tr style="background-color: #444; color: #fff">
      <th>To</th>
      <th>Subject</th>
      <th>Text</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>[email protected]</td>
      <td>Test subject</td>
      <td style="width: 50%">
        <div style="display: flex">
        <span style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;flex: 1; width: 10px">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </span>
        </div>
      </td>
    <tr>
  </tbody>
</table>

Upvotes: 0

Related Questions