Creating a stylish Bootstrap 5 table featuring a large PRE block in a cell that is scrollable

I am currently working on formatting a table and I need some help figuring out how to achieve my desired layout. The issue I'm facing is with a cell that contains a large JSON object block. I want this block to either wrap within the enclosing TD, or to have its contents scroll without causing the table to exceed the screen width.

For reference, you can view an example of what I'm attempting to do in this jsfiddle:

To clarify, in the cell with colspan=4, I would like the content to be scrollable within the cell.

https://jsfiddle.net/y8gzqpv5/1/

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, world!</title>
  </head>

  <body>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">
            <input type="checkbox">
          </th>
          <th scope="col">Message ID</th>
          <th scope="col">Created Date (UTC)</th>
          <th scope="col" class="clickable">Message Type<span>⌃</span></th>
          <th scope="col">Trace ID</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">
            <input type="checkbox"> 
          </td>
          <td>64bfe115407c62030d67c3bf</td>
          <td>7/25/2023 2:49:57 PM</td>
          <td>MyEventType</td>
          <td>5d32270e-b0a3-416c-9eb3-5e1006376850</td> 
        </tr>
        
        <tr>
          <td colspan="4">
            <div class="overflow-scroll">
              <pre>
                <code class="language-json" style="overflow: auto; white-space: pre; word-wrap: break-word; white-space: break-spaces;">{
  "TraceId": "5d32270e-b0a3-416c-9eb3-5e1006376850",
  "Key": "6b777e8f-882e-4a53-8ba0-64eca033c13c",
  "Type": "LongNameOfSomeParsedEventType",
  "Payload": "{\u0022AggregateUuid\u0022:\u00226b00de8f-882e-4a53-8ba0-64eca033c13c\u0022,\u0022Version\u0022:0,\u0022ParsedDate\u0022:\u00222023-07-24T21:58:39.1822492\u002B00:00\u0022,\u0022NumberRecordsParsed\u0022:2}",
  "SqsReceiptHandle": "AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzz...
                </code>
              </pre>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

I've experimented with different scrolling, clipping, and hidden content techniques but have been unable to render it correctly.

Answer №1

To make the necessary changes to the table layout, you simply need to adjust it as shown below:

.table {
  table-layout: fixed
}

By using the fixed layout, you can ensure that the table will not exceed the specified width (100%). For more information, you can refer to this resource on MDN. You can also view an updated fiddle here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can Javascript be used to identify the number of td elements in a table and specify column widths within the table tags?

Is there a way to automatically add the "col width" tag based on the number of td tags within a Table tag? For example, if there are 2 td's, then it should add 2 "col width", and if there are 3 then, 3 "col width", and so on. <!DOCTYPE html> &l ...

"Exploring the world of jQuery and the array data structure

I'm attempting to target and access all inputs with the specified class: validate['number'] However, in some cases, the classes may appear as follows: validate['required', 'number'] My goal is to identify all elements ...

VueJS3 and Vuetify are in need of some additional CSS classes

We are currently in the process of upgrading our application from old VueJS+Vuetify to VueJS3. However, we have encountered some classes defined in the template that are not available in the new version. These classes include xs12 (which is intended to co ...

The interaction between background-size: cover and background-position

I wanted to experiment with setting background-size: cover and testing out different background positions. Feel free to check out the live fiddle for a hands-on experience. HTML <div id="container"> </div> CSS #container { backgro ...

Is it possible to use HTML alone in Bootstrap 5 to link a button to display a toast notification?

I'm working on a Bootstrap page that includes a button and a toast element sourced from the Bootstrap documentation. The documentation states that I need to initialize the toast in JavaScript during page load. My goal is to have the toast appear when ...

modify the color of a box within a grid upon clicking it

I am curious if it is possible to change the color of a box when it is clicked. I am working on coding a "calculator layout" and would like to start with this part 1 2 3 4 5 6 7 8 9 0 This is what I have been working on and struggling with. $(docume ...

Learn the process of using Python to copy HTML code to the clipboard

I am attempting to create a simple script in Python on Windows 10 that can copy a customized text hyperlink (Example) to the clipboard and maintain its recognition as HTML when pasted, much like how Microsoft Word handles custom text hyperlinks. I have at ...

Toggle button to collapse the Bootstrap side bar on larger screens

I am currently utilizing the following template: An issue I am facing is that I want my sidebar to either shrink or hide when a button is clicked, specifically on a 22" PC screen. I have experimented with several solutions without achieving success. Alt ...

Open the HTML document and access the file contents

I'm having trouble reading a text file from my computer onto a website. It works fine in Internet Explorer, but won't work in Chrome. I don't have much experience with HTML, so any help would be much appreciated! <html> <body> ...

Internet Explorer and Edge browsers are concealing box shadow behind the parent div

When using an input slider range, the box-shadow is being applied to the active thumb in all browsers except for IE & EDGE. In these browsers, the shadow is cutting or hiding behind the parent div #c. I have already tried setting overflow:visible on the p ...

Angular - The differ is unable to find support for the object 'Item One' which is of type 'string'. NgFor is only able to bind to Iterables like Arrays and not individual objects

Many questions on StackOverflow share similarities with this one, but I have not been able to find a solution that fits my issue. My code functions correctly when attempting to populate items in a "Select" control. It successfully retrieves data if the it ...

Incorporate CSS styling from a separate .css file into a material component

Just starting out with material UI. I have a css file that looks like this: .bgItem { font-size: 14px; } My component setup is as follows: <MenuItem key={status.Id} value={status.Value} classes={css.bgItem}> {status.Description} </Men ...

What could be causing the compatibility issue between fr units and grid-template-rows in CSS grid?

I'm having trouble getting the row height to change using fr units in my grid-template-rows. It seems to work fine with other units like pixels, but not with fr. I find it confusing that the fr units work perfectly fine with grid-template-columns, so ...

Wrapping a list vertically with ASP.NET using a repeater for generation

I have a repeater that is creating a list of links in no particular order. I want the list to be displayed as follows: -Item1 -Item4 -Item2 -Item5 -Item3 Most solutions I've found require you to know the items in advance and set specific classes for ...

Adaptive Container with Images that are not stretched to full width

Is there a way to achieve the same effect as seen in images 2 and 3 here: Although these images already have their own "padding," I'm curious if it can be replicated using just jQuery and CSS? I would appreciate any help or insights on this. Thank y ...

Ways to distinguish jquery response apart from using $.post method?

Using jquery $.post method: $.post( 'includes/studiesAjax/addTryb.php', {inputVL: inputVL}, function(res){ $("#container").html(res); } ); The response contains a long html code. I am interested in extracting data from ...

Use Javascript to deactivate the mouse cursor and rely solely on the keyboard cursor for navigation

I am facing an issue with a div that contains a textarea. The cursor is automatically positioned at the beginning of the text within the textarea. I would like to disable the mouse cursor when hovering over the textarea but still be able to navigate within ...

In the world of HTML5, you can find the <main> nestled within the <

Plot: As I was creating a coupons website, I came across the issue of incorporating non-unique content into the <main><article> ..here..</article></main>. Problem: Despite w3schools' statement : The content inside the eleme ...

Calculate the total value of an object using Typescript

Here is the data that I have: [Products, Products, Products, Products] 0: Products {product_id: "1", Product_type_id: "11", Subtotal:450, …} 1: Products {product_id: "2", Product_type_id: "22", Subtotal:550, …} 2: Products {product_id: ...

Struggling to ensure buttons on my page respond and resize properly alongside the other elements

Despite making most of this page responsive, I'm having trouble getting the two buttons to scale appropriately. They are utilizing javascript for a mouseover effect, and I suspect that might be causing some issues. Ideally, I would like the images to ...