Create an HTML table cell that shows only part of the text with a button labeled "Show more/less" to toggle between displaying or hiding the complete text

Question

Create an HTML table cell that shows only part of the text with a button labeled "Show more/less" to toggle between displaying or hiding the complete text

Concern: I am dealing with a HTML table that contains multiple columns, with the last column being "Stack Trace" which is often lengthy. The complete display of the stack trace leads to poor table formatting.

Goal: My aim is to showcase the "Stack Trace" as truncated text with a 'Show more/less' button. Upon clicking the 'Show more/less' button for any cell, it should reveal/hide the full "Stack Trace" specific to that cell.

Provided below is my csv file.

DATETIME,HOST,REQUEST,STACK_TRACE
5/13/2022 15:04:05,host1,POST,"java.lang.Exception: Stack trace at java.base/java.lang.Thread.dumpStack(Thread.java:1383) at com.ericgoebelbecker.stacktraces.StackTrace.d(StackTrace.java:23) at com.ericgoebelbecker.stacktraces.StackTrace.c(StackTrace.java:19) at com.ericgoebelbecker.stacktraces.StackTrace.b(StackTrace.java:15) at com.ericgoebelbecker.stacktraces.StackTrace.a(StackTrace.java:11) at com.ericgoebelbecker.stacktraces.StackTrace.main(StackTrace.java:7)"
5/13/2022 15:06:05,host2,POST,"Exception in thread ""main"" java.lang.RuntimeException: A test exception   at com.stackify.stacktrace.StackTraceExample.methodB(StackTraceExample.java:13)   at com.stackify.stacktrace.StackTraceExample.methodA(StackTraceExample.java:9)   at com.stackify.stacktrace.StackTraceExample.main(StackTraceExample.java:5)"
5/13/2022 15:07:05,host5,GET,"java.lang.Throwable: A test exception   at com.stackify.stacktrace.StackElementExample.methodD(StackElementExample.java:23)   at com.stackify.stacktrace.StackElementExample.methodC(StackElementExample.java:15)   at com.stackify.stacktrace.StackElementExampleTest.whenElementOneIsReadUsingThrowable_thenMethodCatchingThrowableIsObtained(StackElementExampleTest.java:34)"

CSS Attempted Solution: -

<head><style>
table{ 
    width:100%; 
    table-layout: fixed; 
    overflow-wrap: break-word; 
} 
th:nth-child(4){ width:60%; }
td:nth-child(4){
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
</style></head>

Findings: The current setup displays a truncated version of the "Stack Trace" without providing a 'Show more/less' option.

https://i.sstatic.net/hZIew.jpg

I require a 'Show more/less' button/link that, when activated, will reveal/hide the complete "Stack Trace" for the respective row cell.

html css html-table

Answer 1

Answer №1

If you're looking to get started, here's a sample code snippet that may give you an idea. Feel free to reach out if you have any questions or need further assistance.

$(document).ready(function(){
  $(".showa").click(function() {
    $("td p.a").css("overflow", "visible");
     $("td p.a").css("white-space", "normal");
  });
  
    $(".hidea").click(function() {
    $("td p.a").css("overflow", "ellipsis");
     $("td p.a").css("white-space", "nowrap");
  });
  
  $(".showb").click(function() {
    $("td p.b").css("overflow", "visible");
     $("td p.b").css("white-space", "normal");
  });
  
    $(".hideb").click(function() {
    $("td p.b").css("overflow", "ellipsis");
     $("td p.b").css("white-space", "nowrap");
  });

});

table{ 
    width:100%; 
    table-layout: fixed; 
    overflow-wrap: break-word; 
} 
th:nth-child(4){ width:60%; }
td:nth-child(4){
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  

}

td:active {
  overflow: visible;
  white-space: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table colspan="4">
<tr>
 <th>Datetime</th>
 <th>Host</th>
 <th>Request</th>
 <th>Stack_Trace</th>
 </tr>
 <tbody>
 <tr>
 <td>123</td>
 <td>host1</td>
 <td>post</td>
 <td><p class="a">adadasfafsa aSFsfasgagadhsgadhsfjhsfjdgj blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah</p> </td>
 <td><button class="showa">Show</button><button class="hidea"> Hide </button></td>
 </tr>
 
  <tr>
 <td>123</td>
 <td>host1</td>
 <td>post</td>
 <td><p class="b">blah blah  blah blah blah  blah blah blah adadasfafsa aSFsfasgagadhsgadhsfjhsfjdgj blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah</p> </td>
 <td><button class="showb">Show</button><button class="hideb"> Hide </button></td>
 </tr>
 </tbody>
</table>

Answer 2

If you're looking to get started, here's a sample code snippet that may give you an idea. Feel free to reach out if you have any questions or need further assistance.

$(document).ready(function(){
  $(".showa").click(function() {
    $("td p.a").css("overflow", "visible");
     $("td p.a").css("white-space", "normal");
  });
  
    $(".hidea").click(function() {
    $("td p.a").css("overflow", "ellipsis");
     $("td p.a").css("white-space", "nowrap");
  });
  
  $(".showb").click(function() {
    $("td p.b").css("overflow", "visible");
     $("td p.b").css("white-space", "normal");
  });
  
    $(".hideb").click(function() {
    $("td p.b").css("overflow", "ellipsis");
     $("td p.b").css("white-space", "nowrap");
  });

});

table{ 
    width:100%; 
    table-layout: fixed; 
    overflow-wrap: break-word; 
} 
th:nth-child(4){ width:60%; }
td:nth-child(4){
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  

}

td:active {
  overflow: visible;
  white-space: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table colspan="4">
<tr>
 <th>Datetime</th>
 <th>Host</th>
 <th>Request</th>
 <th>Stack_Trace</th>
 </tr>
 <tbody>
 <tr>
 <td>123</td>
 <td>host1</td>
 <td>post</td>
 <td><p class="a">adadasfafsa aSFsfasgagadhsgadhsfjhsfjdgj blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah</p> </td>
 <td><button class="showa">Show</button><button class="hidea"> Hide </button></td>
 </tr>
 
  <tr>
 <td>123</td>
 <td>host1</td>
 <td>post</td>
 <td><p class="b">blah blah  blah blah blah  blah blah blah adadasfafsa aSFsfasgagadhsgadhsfjhsfjdgj blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah</p> </td>
 <td><button class="showb">Show</button><button class="hideb"> Hide </button></td>
 </tr>
 </tbody>
</table>

Create an HTML table cell that shows only part of the text with a button labeled "Show more/less" to toggle between displaying or hiding the complete text

Answer №1

Similar questions

Using Firebase with the async pipe in Angular 5

Excessive vertical space is utilized by the vertical images in the CSS grid image gallery

What is the best way to ensure that bootstrap columns collapse in equal multiples?

Displaying a progress bar during image uploads in PHP without using AJAX

Display the tooltip only when the checkbox is disabled in AngularJS

Toggle the visibility of a second checkbox based on the checked and unchecked state of an iCheck checkbox

Switching over to styled components from plain CSS using a ternary operator

Tips for stopping the mobile keyboard from resizing the viewport

Is it feasible to incorporate the CSS and Bootstrap (CDNs) specific to an HTML component without affecting the styling of other pages?

How to centrally align header elements in Bootstrap 4 on mobile devices?

Viewport - Presenting a Dynamic Website in Desktop Mode

Looking to modify and cache external links in a Rails application

Delay in dropping while using React Beautiful DnD

Paragraph opacity adjustments can alter both the text and background opacities

Ways to position two buttons in each corner with flexbox in a react js application

Unusual problem encountered with Chart.js bar chart, image dispersion

How can you center a left floated div?

Flexbox positioning: Absolute element within a relative container

Creating a Dynamic Layout with HTML and CSS: Effortlessly Positioning Elements for a Sle

Utilizing European letters in HTML code