Unable to enclose a table within a div element for Chrome web browser

I attempted to keep a table within a div to ensure that the table's width does not go beyond the width of the containing DIV.

This table consists of one row with two elements. The second element is fixed in length, while I want the first element to wrap the text so that the total table width does not exceed the width of the div.

Although the following code works fine for Firefox browser (version 29.0), it doesn't seem to work for Chrome browser (version 40.0.2214.111). Any suggestions on how to make it work for both browsers? Thank you.

<html>
    <body>The code can be found in the provided jsfiddle link</body>
</html>

Answer №1

To maintain the format of your data, consider using a table instead of the pre tag (you can even use a table inside a table).

Your issue could be resolved by using 'table-layout: fixed;', but since you are using pre and div elements within the table, you will need to make modifications for it to function properly. For now, I have removed the span and pre tags.

JSFiddle

CSS

body {
    margin: 0%;
    width: 100%;
}
table {
    width: 100%;
    overflow: auto;
    table-layout: fixed;
    margin: 0;
    padding: 2px;    
}

.middle {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 1250px;
}

HTML

<div class="middle">
    <table border=1>
        <tbody>
            <tr>
                <td valign="top">
                    <span id="pktDetails">
                        <li class="main1" onclick="pktclick(this)" state="0">Frame 169: 759 bytes on wire (6072 bits), 759 bytes captured (6072 bits)</li>
                        <ul class="a" style="display:none">
                            <li class="leaf">Encapsulation type: Ethernet (1)</li>
                            <li class="leaf">Arrival Time: Oct 11, 2011 06:51:36.170112000 CDT</li>
                            <li class="leaf">Epoch Time: 1318333896.170112000 seconds</li>
                            <li class="leaf">Frame Number: 169</li>
                            <li class="leaf">Frame Length: 759 bytes (6072 bits)</li>
                            <li class="leaf">Capture Length: 759 bytes (6072 bits)</li>
                        </ul>
                        
                        <!-- More list items here -->
                    </span>
                </td>

                <!-- More table cells here -->

            </tr>
                
        </tbody>
    </table>
</div>

Answer №2

The overflow:auto property is applied to the first two elements within div.middle. By changing the overflow property to initial or removing it entirely, the layout will function correctly in Firefox.

<body>
   <div class="middle">
      <div style="overflow: initial;">
      <table style="overflow: initial;">
...

JSFiddle

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

Web browsers such as Chrome and Internet Explorer, along with the AngularJS framework, and the Access

In the process of creating a web application using AngularJS that I plan to distribute via CDs, I encountered a major obstacle related to the same origin policy in Chrome and IE. Specifically, I received the following error message: XMLHttpRequest cannot ...

"Unfortunately, the JavaScript external function failed to function properly, but miraculously the inline function

Struggling to create a fullscreen image modal on the web? I was able to get it working fine when embedding the script directly into my HTML file, but as soon as I moved it to an external JS file, things fell apart. I've double-checked all the variable ...

tips for moving a button 2 pixels up or down in position

How can I adjust the position of my button by a specific number of pixels up or down from where it currently is? Can you provide guidance on how to find the current location? Thank you in advance. ...

Sending a variable to an AngularJS factory

I am currently working on a select list that looks like this: <select name="make" class="form-control" ng-model="selectCity"> <option value="Kannur">Kannur</option> <option value="Agra">Agra</option> <option va ...

Having trouble displaying a background image on a React application

Public>images>img-2.jpg src>components>pages>Services.js> import React from 'react'; import '../../App.css'; export default function Services() { return <h1 className='services ...

Maximizing space efficiency in Bootstrap 5

Hello there I have a query; I am currently utilizing Bootstrap 5 for my website, and it's working well. However, I would like Bootstrap to fill the entire page instead of just 80%; (Refer to image) https://i.sstatic.net/Iswmu.jpg <head> ...

Placing a div directly beneath an anchor tag

I'm trying to create a dropdown menu that appears directly under the URL that triggers it. I have successfully made the menu appear, but I am struggling with positioning it correctly. Here is my HTML code: <div id="container"> Content here ...

Outlook issue with table sizing

I'm trying to display a table with 14 columns in Outlook mail, but the column headings are too long and don't fit on one line. I've tried setting widths for each column, but the entire table doesn't widen as expected. For example, if I ...

Discovering descendant div elements

I've been conducting some research, but I'm struggling to find a specific answer for this. Here is the HTML code snippet: <div class="collapsingHeader"> <div class="listItemWrapper"> <div class="itemWrapper"> ...

dividing Handlebars HTML content into different files or sections

I am looking to design a single route webpage, but I would like to divide the HTML code into multiple files. When rendering this particular route, my goal is for the rendered file to pull content from different template files and combine them into one coh ...

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...

Passing values from Vue3 child component to parent component

Hey there, I'm currently diving into the world of Vue and I'm working on a table that dynamically displays abbreviations. I've been trying to send a searchTerm from my child component to the parent component, but I'm struggling with ge ...

Can you explain the meaning of the tag "&" ">" "*" in the context of useStyles functions?

After experimenting with React and Material-UI, I came across an interesting pattern in the code. When using the useStyle function, developers often create a class called 'root' and utilize the tag & > *. I tried to research the meaning be ...

Is the stylesheet connected but failing to load?

Updating an app from Rails 3.2 to version 4 has been mostly successful, but I am encountering issues with some of my stylesheets not being applied correctly. Checking the source code (ctr+U), everything appears to be linked properly: <!DOCTYPE html> ...

Optimizing SEO with asynchronous image loading

I've been developing a custom middleman gem that allows for asynchronous loading of images, similar to the effect seen on Medium. Everything is functioning smoothly, but I'm uncertain about the impact on SEO. The image tag in question looks like ...

Enhancing a JQuery progress bar with customized text and dynamic background color updates

I am considering implementing the Jquery progress bar to display the user's advancement in a course. Within the progress bar, I aim to exhibit the text Course Progress 70% Additionally, I wish to alter the default grey color of the progress bar Thi ...

What is the process for connecting a personalized bootstrap framework with an index.html document?

I have recently dived into the world of bootstrap and I just customized my bootstrap file on http://getbootstrap.com/docs/3.3/customize/ After compiling and downloading, I found it challenging to link it with my index.html file. The source of the bootstra ...

Scroll the table automatically when the currently selected row is the second-to-last row

Having trouble with a scrolling table issue. https://i.sstatic.net/PFyN3.png Upon page load, the first row (ROW 1) is automatically selected and highlighted. Clicking the next button selects and highlights the subsequent rows. However, once ROW >= 8 (e ...

Please only choose the immediate children of the body element

<body> <div> <div class='container'></div> </div> <div class='container'></div> </body> Is there a way to use jQuery to specifically target the second container div dire ...

Using Javascript to navigate links in a list using keyboard arrow keys

When links are not wrapped in other elements, I am able to change focus easily. Here is how it works: HTML <a id="first" href="#" class='move'>Link</a> <a href="#" class='move'>Link</a> <a href="#" class=&a ...