tables that are intertwined

There are three tables on my page and they are all overlapping. Is there a way to prevent this overlap?

Check out this link

<table id="inventoryTable" class="table dataTable" aria-describedby="inventoryTable_info">
                        <thead>
                            <tr class="inventoryListHeading" role="row" style="background-color: #1a4567; color: white;">
                                <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 103px;">Qty</th>
                                <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 123px;">MFG P/N</th>
                                <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 85px;">Unit Price</th>
                                <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 134px;">Ext. Price</th>
                            </tr>
                        </thead>

                        <tbody role="alert" aria-live="polite" aria-relevant="all">
                            <tr id="row_1" class="odd">
                                <td class=" "><div id="fdCompanyName_1"><a href="/Customer/index/?step=modify&amp;cid=1">FQ Systems</a></div></td>
                                <td class=" "><div id="fdCustId_1"><a href="/Customer/index/?step=modify&amp;cid=1">1</a></div></td>
                                <td class=" "><div id="fdContactName_1"><a href="/Customer/index/?step=modify&amp;cid=1">Soojin Kim</a></div></td>
                                <td class=" "><div id="fdPhone_1"><a href="/Customer/index/?step=modify&amp;cid=1">408-172-3827</a></div></td>
                            </tr>

                        </tbody>
                    </table>
javascripthtmlcsstwitter-bootstrap

Answer №1

There doesn't seem to be any issues with your table itself. It could be related to your CSS styling. Consider utilizing a debugging tool such as Firebug for assistance.

Answer №2

Whoa! This is a prime example of "divitis," with an excessive amount of divs in the HTML on that fiddle. There's a table nested inside a div and divs within table cells.

While this setup may function, why not simply assign ids to the td elements instead? Are you restricted by a certain CMS?

Additionally, I noticed the ID fdContactName_1 appears twice just by scanning through the code. IDs should be unique and only appear once per page.

I recommend copying all the code, pasting it into the validator at validator.w3.org/

Address any errors and work on improving the content structure. Currently, based on the fiddle code, there are 82 Errors and 45 warning(s). The warnings may be less critical.

Even applying something like table margin:0 0 30px 0; could pose challenges due to the numerous ids...achieving proper specificity will be quite tricky.

Answer №3

The solution is actually quite straightforward. Your tables are exceeding the size of the containing div. Try specifying a width for your table. In addition, consider removing the unnecessary div span5 within another div, as this will allow your table to resize properly to fit within its designated container.

Furthermore, you seem to have an excessive number of superfluous divs in your code. As mentioned by Kelly Johnson, having a single div inside a td and using span5 within span6 serves no real purpose. Each element should be considered a container; therefore, using divs just for styling can lead to unnecessary nesting. Remember, a div acts as a rectangular container, so avoid placing one rectangle inside another. If you require spacing between text and the edge of a td, utilize padding in your styling.

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

The event listener $(window).on('hashchange', function() is causing issues on my Internet Explorer 9 browser

My website utilizes the code $(window).bind('hashchange', function ()) to check if a redirect is necessary. It is working perfectly fine in Firefox, but I am facing issues with IE9. $(window).bind('hashchange', function () { ...

javascriptphpjquery

"Exploring the New Features of Bootstrap 5: Button Collapse and

I am struggling to get two buttons working with Bootstrap 5. The first button is supposed to trigger two JavaScript functions to open a bootstrap carousel. The second button is a simple collapse button designed to reveal a long text string. Unfortunately, ...

javascripthtmlbootstrap-5

Struggling to target specific elements in CSS that are dynamically generated through JavaScript

After using JavaScript to generate some divs, I ended up with the following code: const container = document.querySelector('#container'); for(let i = 1; i < 17; i++) { var row = document.createElement('div'); row.id = 'r ...

javascripthtmlcsssyntax

Reactstrap: Is it necessary to enclose adjacent JSX elements within a wrapping tag?

While working on my React course project, I encountered an issue with my faux shopping website. The error message that keeps popping up is: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...& ...

javascriptreactjstwitter-bootstrapjsxreactstrap

On-page refresh triggering HTTP 404 error in Vue3 routing situation

Issue Upon reloading a route, such as /installer, in Vue3.js, I encounter the following error: https://i.sstatic.net/UKxdk.png Code Snippet I am utilizing the Router with the setup below: const router = createRouter({ history: createWebHistory(proces ...

javascripthtmlvue.jsvue-routervuejs3

The Bootstrap navigation row smoothly adjusts its size, yet only partially highlights active or highlighted links

When viewing on a smaller screen, one of the links in this navigation (nav-pills, nav-justified) spans two lines, causing the other links to appear larger as well. While this may seem beneficial, active or highlighted links only partially fill the box, res ...

csstwitter-bootstrap-3

Create a border that does not inherit the opacity of the object

Check out this jsBin for reference: http://jsbin.com/uyonux/1 The hover state is working fine, but the focus state is not. I want the blue color to remain solid #13A3F7 without inheriting the opacity of .4. Is there a way to achieve this without the elem ...

csscolors

"Exploring the Possibilities with WordPress and Waypoint Js

After exploring various resources and tutorials online, I am struggling to implement Waypoints with WordPress. Despite placing the necessary files like waypoints.min.js and waypoints.js in the designated download folder within the js directory of my templa ...

javascriptjquerywordpress

Acquiring backend information to display in front-end using ReactJS

I receive data from the backend to present it in the following font: componentDidMount() { const response = this.props.store.privateImputationData; console.log(response); } When I check the console, it shows null. However, if I use a setTimeout, it w ...

javascriptreactjs

What could be the reason for the malfunction of the select (mongoose query)?

I'm trying to retrieve a User's highest score post. To accomplish this, I am querying the Post model and looking for posts where their user._id matches the author in the post. Everything is functioning correctly in this regard. However, my goal ...

javascriptnode.jsexpressmongoose

CSS - the option element is not appearing when using display:block

I am facing an issue with a select tag and its options. I have used CSS to hide all the options except for the last one which is set to display block. However, the last option is not showing up. Could this be due to the large number of options present? &l ...

htmlcssselect

Adjust the viewport width based on the width of the device

Having difficulty adjusting the meta tag viewport content width based on device width, I am struggling to achieve my desired outcome. Here is the code snippet I have been working with: Code snippet: <meta id="viewport" name="viewport" content="width=d ...

javascripthtmlioscssviewport

PHP Multiple Filter Options

Currently, I am developing a filtering system for a mySQL database that utilizes dropdown menus. While the system functions correctly when using one filter, I am encountering difficulties in stacking multiple filters. To achieve this, I am retrieving the c ...

phphtmlmysqldatabasefilter

Prevent the cursor from exiting the div element when the tab key is pressed

Currently, I have implemented a search input box allowing users to either enter a value or select from a list of suggestions. The issue arises when the user selects an option using the tab key, as it causes the cursor to move outside the input box despite ...

cssreactjs

Transferring binary data from C# to Node.js for deserialization

I am facing a challenge where I have a byte array created in C# from an object type, which is then sent over the socket protocol to a Node.js app. However, I am unable to deserialize the data into a readable object. Can anyone suggest a way to decode this ...

javascriptc#node.jsbinarybinaryformatter

The text's worth in the code of javascript

Having an issue with my code where I want to add a string to my Confirm() function in JavaScript but it's not working correctly. myData.setValue(i, 9, '<a href="'+scriptDelete+'" onclick="return confirm();" > Delete </a>&ap ...

javascripthtmldom

The width of the PrimeNG p-password component does not align properly with the container size

Currently, I am working on designing a login page using Primeng. Everything seems to be functioning properly except for the p-password component which is not aligning correctly with the input above it. <div class="flex flex-column align-items-cente ...

htmlangularfrontendprimengprimeflex

Leveraging HTML5 Canvas for blending multiple transformations

Is it possible to zoom out an image, rotate it by 30 degrees around its center, and then vertically flip the rotated image while maintaining the rotation? ...

htmlcanvas

Exploring Node.js and JSON: Retrieving specific object attributes

Utilizing ExpressJS, NodeJS, and Bookshelf.js In an attempt to display a user's list of friends, encountering the error "Unhandled rejection TypeError: Cannot read property 'friends' of undefined" when trying to access a property of the obj ...

javascriptjsonnode.jsbookshelf.js

Similar to the functionality of $.fn.load but without the need for jQuery

My goal is to dynamically load Jade content into a specific div when a button is clicked. After researching how to achieve this with jQuery, I found several posts recommending the use of the following code snippet: $('#div').load('/somePage& ...

javascriptjquerynode.jsexpresspug