2

Hi I want to display only few text in a html column and remaining to expand only if it is expanded by the user.

All in a single line how do I do it.(as shown in below screenshot)

What to display like this

Below is my code

<table style="border-style: solid; 
              white-space: pre; 
              overflow: hidden; 
              word-wrap: break-word      
              text-overflow: ellipsis; 
              border-color: 000708; background-color: 000708;" border="3">
  <tbody>
    <tr bgcolor="#18C1C1">
      <td style="text-align: center; width: 107.588px;"><strong> Tree</strong></td>
      <td style="text-align: center; width: 84.275px;"><strong> ID</strong></td>
      <td style="text-align: center; width: 81.975px;"><strong> S</strong></td>
      <td style="text-align: center; width: 3899.98px;"><strong>Text</strong></td>
      <td style="text-align: center; width: 158.688px;"><strong> Name</strong></td>
    </tr>
    <tr>
      <td style="width: 107.588px;">113</td>
      <td style="width: 84.275px;">113</td>
      <td style="width: 81.975px;">0</td>
      <td style="width: 3899.98px;">This s a test and this should not expand after a fixed length --?&gt;</td>
      <td style="width:
158.688px;">Test</td>
    </tr>
  </tbody>
</table>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Albert
  • 21
  • 3
  • 1
    Does this answer your question? [CSS text-overflow in a table cell?](https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell) – WOUNDEDStevenJones Nov 19 '21 at 14:31
  • Also this is a good read: https://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working – PM 77-1 Nov 19 '21 at 14:34
  • ... and this: https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell – PM 77-1 Nov 19 '21 at 15:10

2 Answers2

1

If you don't mind using jQuery then you can give jQuery Resizable a try. jQuery UI Resizeable will allow resizing the element by the user and the CSS will help to hide the text properties rather than moving to the next line.

I also added a unique ID property to the table, keep that in mind if you have multiple tables and act accordingly.

Note: Table headers are draggable here.

$("#myTable thead th").resizable({
    handles: "e" //To specify where the drag handles will be placed on the resizable element.
});
table {
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;  
}
 
table th {
    white-space: nowrap;
    overflow: hidden;
}
 
table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table id="myTable" style="border-style: solid; 
              overflow: hidden; 
              word-wrap: break-word      
              text-overflow: ellipsis; 
              border-color: 000708; background-color: 000708;" border="3">
   <thead>
    <tr bgcolor="#18C1C1">
      <th ><strong> Tree</strong></th>
      <th ><strong> ID</strong></th>
      <th ><strong> S</strong></th>
      <th ><strong>Text</strong></th>
      <th ><strong> Name</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >113</td>
      <td >113</td>
      <td >0</td>
      <td >This s a test and this should not expand after a fixed length --?&gt;</td>
      <td >Test</td>
    </tr>
  </tbody>
</table>
TBA
  • 1,921
  • 4
  • 13
  • 26
0

Check out text-overflow property

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}
Tiko
  • 1,241
  • 11
  • 19