My root div has a width of 100% and I need to ensure that all children do not overlap (overflow:hidden) or exceed the 100% width.
While this works well with inner <div>s, using <table>s often causes the table to extend beyond the parent 100% div.
Is there a way to fix this issue while still utilizing the table?
Check out the solution on this JSFiddle.
See the screenshot for reference:
https://i.stack.imgur.com/0DjXQ.png
To ensure that the text within td elements displays properly, consider using word-break: break-word;. This is especially useful for long texts. Alternatively, you can use word-break: break-all; to force the text to break if needed.
Updated CSS Code
#container table td{
word-break: break-word;
}
Check out the live example here: https://jsfiddle.net/nikhilvkd/kLt1mec8/3/
If you incorporate the following CSS styles, it will likely resolve your issue:
#wrapper table {
table-layout: fixed;
}
#wrapper table td {
overflow: auto; /* can be set to hidden if desired */
}
Revised code snippet:
#wrapper {
width: 100%;
box-sizing: border-box;
padding: 20px;
}
#item {
padding: 10px;
border-style: solid;
border-color: #ff0000;
border-width: 1px;
overflow: hidden;
}
#wrapper table {
width: 100%;
border-style: solid;
border-color: #ff0000;
border-width: 1px;
table-layout: fixed;
}
#wrapper table td {
overflow: auto;
}
#wrapper table td:nth-child(1) {
width: 10%;
}
#wrapper table td:nth-child(2) {
width: 90%;
}<div id="wrapper">
<div id="item">
This is a normal text box where the width is preserved correctly.
</div>
<div id="item">
This div contains a very long word, for example, https://upload.wikimedia.org/wikipedia/commons/c/ca/Simca_1300_Serie_1_rear_20110114.jpg and the width does not exceed 100% of the parent's width as intended.
</div>
<table>
<tr>
<td>Col1</td>
<td>Col2 with lots of text including a long link like https://upload.wikimedia.org/wikipedia/commons/c/ca/Simca_1300_Serie_1_rear_20110114.jpg causing excessive width. How can I prevent this DIV from being wider than its parent?</td>
</tr>
</table>
</div>One possible solution is to use the CSS property word-break: break-all; for your table data cell
Trying to enhance a selected item with an additional UI element using a pseudo-element. Specifically, looking to add a line above the menu item. https://i.stack.imgur.com/MZnmw.png The code I've implemented is not displaying the desired line: const ...
Currently, I am in the process of developing a website for personal use (without any intention of making profit). The vision for this website is to serve as a comprehensive "directory" featuring various posts sourced from different websites - similar to a ...
If I have the following string: let sentence = '<h1 style="lots of class"> </h1><h2> <p style="bunch of class"> </p> <p style="bunch of class"> </p></h2>'; This string contains multiple elements a ...
Looking to resolve a situation where two identical IDs exist and need to implement some JQuery. The objective is for the input value to automatically update itself based on changes in the text of the p tag. $(document).ready(function(){ ...
Hello, I am currently working on extracting professor names and comments from the ratemyprofessor website by converting each div into plaintext. The following is the structure of the div classes that I am dealing with: <div id="ratingTable"> <div ...
I have a large div with a grid display, consisting of 3 rows and 2 columns. I am attempting to include text directly below the photo within each cell. This is what my code looks like: <div class="arrange-fixes"> ...
Is it really impossible? I'm determined to pull images from a MySQL database and create a carousel similar to the one showcased in this link: . However, my goal is to achieve this using only HTML, CSS, PHP, and MySQL. ...
Hey there, I've got a list of products that can be selected using the Ctrl key. $(parentSelector).on("click", function (evnt) { evnt.stopImmediatePropagation(); var item = $(evnt.delegateTarget) ...
Is it possible to replicate the search box effect on the Android website, where the menu items fade out and the search box expands upon clicking the search icon?view image here See the difference before and after clicking the search icon ...
I've experimented with multiple media queries in an attempt to make this work on both iPhone (landscape/portrait) and desktop, but I'm struggling to achieve the desired outcome on both simultaneously. While some of my classes are functioning cor ...
Having trouble with menu styling, I'm new to this and trying to add a sub menu to an existing drop down menu. Check out my JSFiddle This is the CSS code: .menu_main { float: left; width: 60%; } #access .menu { list-style: none; font-weight: normal ...
Hello, I seem to be having a CSS issue. Interestingly, my menu (burger menu) works perfectly fine on Firefox but is not functioning properly on Chrome and mobile devices. When I click the button, the menu doesn't open. Has anyone encountered a simil ...
I am currently developing a login page in asp.net and have utilized a template from CodePen at http://codepen.io/andytran/pen/PwoQgO It is my understanding that an asp.net page can only have one form tag with runat="server". However, I need to incorporate ...
How can I modify the appearance of a specific li element when it is clicked? ...
I have this script that generates a "layer" resembling a frame and I need to remove it. Here is the code for creating the layer: function disableLayer() { var layer = document.getElementsByTagName('div')[0]; d = document.createElement(& ...
I'm having trouble keeping my footer at the bottom of the page: body, html{position:relative;} footer{position:absolute;} Even when I use bottom: 0;, the footer doesn't seem to go all the way to the bottom. Is there anyone who can help me troub ...
After executing the code below, an error message pops up: "Notice: Undefined index: uploadFile in C:\xampp\htdocs\ImageTest\processImage.php on line 17" However, when I switch every occurrence of 'uploadFile' with 'fi ...
I need assistance with creating a transparent fixed header using only CSS and no JS. I attempted to use ::before for creating a blur effect with a negative z-index, but so far, my attempts have failed. I know how to achieve this using jQuery, but I am spec ...
Having trouble with the path of my mp3 file stored in local storage and saved in the database. When retrieving the record from the database along with the mp3 file, it seems like the path is incorrect and I can't play it. I executed php artisan stora ...
Trying to showcase a collection of videos in a modal using angular.js, I decided to implement the solution from . However, I encountered difficulty in integrating my scope variables into the "html5gallery" class. <div class="html5gallery" data-skin="ho ...