I'm trying to find a way, using CSS, to change the colspan on the base of a responsive table such as that found on a shopping cart. So what happens is, at lower resolutions, certain columns are trimmed off to preserve horizontal space. This leaves the col spanned rows "hanging" over the end, essentially preserving the original width, causing overflow situations. As we know, horizontal overflows on mobiles is a pain.
So is there a way, using CSS, to change the colspan of table rows? I already know how to do this with JS, using a listener frame, but I'm curious if there was some kinda CSS hack I could do instead. This would help to prevent a bit of FOUC.
Here is a fiddle example: https://jsfiddle.net/Dhaupin/5pv5qmru/3/
Here is the example table structure:
<table>
<thead>
<tr>
<td class="image">Image</td>
<td>Name</td>
<td>Model</td>
<td>Qty</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td class="image">-- img --</td>
<td>This Red Hat</td>
<td>HAT-RED-2384</td>
<td>2</td>
<td>$13.22</td>
</tr>
<tr>
<td class="total right" colspan="4">Subtotal:</td>
<td>$26.44</td>
</tr>
<tr>
<td class="total right" colspan="4">Shipping:</td>
<td>$6.65</td>
</tr>
<tr>
<td class="total right" colspan="4">Total:</td>
<td>$33.10</td>
</tr>
</tbody>
</table>
And some default CSS, hiding the "image" column at 640px or less:
table {
border-collapse: collapse;
}
td {
border: 1px solid grey;
padding: 4px;
width: 18%;
}
.right {
text-align: right;
}
#media (max-width: 640px) {
td.image {
display: none;
/* some kinda css hack here to "hide" without "hiding? */
}
td.total {
/* colspan 3 here? how do we make it span cleanly? */
}
}
Here is what full width looks like:
Here is what it looks like on smaller res, notice the overflow of colspan on bottom:
I know this is not the best solution
but css does not allow to change the native html table attribute value.
More information can be fount here:
HTML colspan in CSS
For better solution you can use js/ jquery
and change attribute colspan for td.total
#media (max-width: 480px) {
td.image {
position: absolute;
left: -99999px;
}
}
This solution doesn't CHANGE the colspans, but corrects colspan issues by adding cells (with different colspans) that show up in place of the hidden ones.
Here's your table with bootstrap styling. Note the opposing use of d-none and d-md-table-cell on the total header columns.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<tr>
<td class="image d-none d-md-table-cell">Image</td>
<td>Name</td>
<td>Model</td>
<td>Qty</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td class="image d-none d-md-table-cell">-- img --</td>
<td>This Red Hat</td>
<td>HAT-RED-2384</td>
<td>2</td>
<td>$13.22</td>
</tr>
<tr>
<td class="total text-right d-none d-md-table-cell" colspan="4">Subtotal:</td>
<td class="total text-right d-table-cell d-md-none" colspan="3">Subtotal:</td>
<td>$26.44</td>
</tr>
<tr>
<td class="total text-right d-none d-md-table-cell" colspan="4">Shipping:</td>
<td class="total text-right d-table-cell d-md-none" colspan="3">Shipping:</td>
<td>$6.65</td>
</tr>
<tr>
<td class="total text-right d-none d-md-table-cell" colspan="4">Total:</td>
<td class="total text-right d-table-cell d-md-none" colspan="3">Total:</td>
<td>$33.10</td>
</tr>
</tbody>
</table>
I have 2 tables that I want to display side by side. So I set the display style property as display: inline-block. The problem is, on both tables, the columns are not taking the full width of the table. There is/are unseen cell(s). Interestingly this does not happen if I remove the DOCTYPE HTML line from the top of the page. The red marked area in the screenshot is my concern.
I have tried setting the font size to 0 of the "tr" and then add my desired font size to the "td". Also tried adding negative right padding/margin, but could not get it to work. Please suggest!
Empty cells at the right of table:
<table id="attn" style="display: inline-block; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="display: inline-block; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
To fix the problem you can use display: inline-table instead of display: inline-block.
Explanation: <table> by default receives display property display: table. This is how it arranges rows/columns and determines how it'll be displayed on the page.
The moment you change that to display: inline-block, <table> looses its property to be a proper table according to CSS. So <tr> <td> etc. don't work as expected, as they shouldn't do inside a display: inline-block element. That's why display: inline-table solves the issue.
What about float instead of inline. Worked for me in IE, Chrome and Firefox.
<!DOCTYPE html>
<table id="attn" style="float:left; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="float:left; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
I've been using word-wrap: break-word to wrap text in divs and spans. However, it doesn't seem to work in table cells. I have a table set to width:100%, with one row and two columns. Text in columns, although styled with the above word-wrap, doesn't wrap. It causes the text to go past the bounds of the cell. This happens on Firefox, Google Chrome and Internet Explorer.
Here's what the source looks like:
td {
border: 1px solid;
}
<table style="width: 100%;">
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</div>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
The long word above is larger than the bounds of my page, but it doesn't break with the above HTML. I've tried the suggestions below of adding text-wrap:suppress and text-wrap:normal, but neither helped.
The following works for me in Internet Explorer. Note the addition of the table-layout:fixed CSS attribute
td {
border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>
<td style="word-break:break-all;">longtextwithoutspace</td>
or
<span style="word-break:break-all;">longtextwithoutspace</span>
A long shot, but double-check with Firebug (or similar) that you aren't accidentally inheriting the following rule:
white-space:nowrap;
This may override your specified line break behaviour.
Turns out there's no good way of doing this. The closest I came is adding "overflow:hidden;" to the div around the table and losing the text.
The real solution seems to be to ditch table though. Using divs and relative positioning I was able to achieve the same effect, minus the legacy of <table>
2015 UPDATE: This is for those like me who want this answer. After 6 years, this works, thanks to all the contributors.
* { /* this works for all but td */
word-wrap:break-word;
}
table { /* this somehow makes it work for td */
table-layout:fixed;
width:100%;
}
As mentioned, putting the text within div almost works. You just have to specify the width of the div, which is fortunate for layouts which are static.
This works on FF 3.6, IE 8, Chrome.
<td>
<div style="width: 442px; word-wrap: break-word">
<!-- Long Content Here-->
</div>
</td>
Workaround that uses overflow-wrap and works fine with normal table layout + table width 100%
https://jsfiddle.net/krf0v6pw/
HTML
<table>
<tr>
<td class="overflow-wrap-hack">
<div class="content">
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div>
</td>
</tr>
</table>
CSS
.content{
word-wrap:break-word; /*old browsers*/
overflow-wrap:break-word;
}
table{
width:100%; /*must be set (to any value)*/
}
.overflow-wrap-hack{
max-width:1px;
}
Benefits:
Uses overflow-wrap:break-word instead of word-break:break-all. Which is better because it tries to break on spaces first, and cuts the word off only if the word is bigger than it's container.
No table-layout:fixed needed. Use your regular auto-sizing.
Not needed to define fixed width or fixed max-width in pixels. Define % of the parent if needed.
Tested in FF57, Chrome62, IE11, Safari11
Problem with
<td style="word-break:break-all;">longtextwithoutspace</td>
is that it will work not so good when text has some spaces, e.g.
<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>
If word andthenlongerwithoutspaces fits into table cell in one line but long text with andthenlongerwithoutspaces does not, the long word will be broken in two, instead of being wrapped.
Alternative solution: insert U+200B (ZWSP), U+00AD (soft hyphen)
or U+200C (ZWNJ) in every long word after every, say, 20th character (however, see warning below):
td {
border: 1px solid;
}
<table style="width: 100%;">
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</div>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
Warning: inserting additional, zero-length characters does not affect reading. However, it does affect text copied into clipboard (these characters are of course copied as well). If the clipboard text is later used in some search function in the web app... search is going to be broken. Although this solution can be seen in some well known web applications, avoid if possible.
Warning: when inserting additional characters, you should not separate multiple code points within grapheme. See https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries for more info.
Change your code
word-wrap: break-word;
to
word-break:break-all;
Example
<table style="width: 100%;">
<tr>
<td>
<div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
</td>
<td><span style="display: inline;">Short Content</span>
</td>
</tr>
</table>
Check out this demo
<table style="width: 100%;">
<tr>
<td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
</td>
<td>
<span style="display: inline;">Foo</span>
</td>
</tr>
</table>
Here is the link to read
Tested in IE 8 and Chrome 13.
<table style="table-layout: fixed; width: 100%">
<tr>
<td>
<div style="word-wrap: break-word;">
longtexthere
</div>
</td>
<td><span style="display: inline;">Foo</span></td>
</tr>
</table>
This causes the table to fit the width of the page and each column to take up 50% of the width.
If you prefer the first column to take up more of the page, add a width: 80% to the td as in the following example, replacing 80% with the percentage of your choice.
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="width:80%">
<div style="word-wrap: break-word;">
longtexthere
</div>
</td>
<td><span style="display: inline;">Foo</span></td>
</tr>
</table>
The only thing that needs to be done is add width to the <td> or the <div> inside the <td> depending on the layout you want to achieve.
eg:
<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>
or
<table style="width: 100%;" border="1"><tr>
<td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>
It appears you need to set word-wrap:break-word; on a block element (div), with specified (non relative) width. Ex:
<table style="width: 100%;"><tr>
<td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>
or using word-break:break-all per Abhishek Simon's suggestion.
The answer that won the bounty is correct, but it doesn't work if the first row of the table has a merged/joined cell (all the cells get equal width).
In this case you should use the colgroup and col tags to display it properly:
<table style="table-layout: fixed; width: 200px">
<colgroup>
<col style="width: 30%;">
<col style="width: 70%;">
</colgroup>
<tr>
<td colspan="2">Merged cell</td>
</tr>
<tr>
<td style="word-wrap: break-word">VeryLongWordInThisCell</td>
<td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>
<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>
i tried all but in my case just work for me
white-space: pre-wrap;
word-wrap: break-word;
I ran into a similar problem. I had a table inside a Bootstrap modal in an AngularJS application. When I changed the filter on the table and long values appeared in the cell in question, the text would overflow outside the cell, and outside the modal. This CSS ended up fixing the problem, applied to the TD:
style="white-space:pre-wrap; word-break:break-word"
That made the values wrap properly even across changes to the table content.
This works for me:
<style type="text/css">
td {
/* CSS 3 */
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
}
And table attribute is:
table {
table-layout: fixed;
width: 100%
}
</style>
If you do not need a table border, apply this:
table{
table-layout:fixed;
border-collapse:collapse;
}
td{
word-wrap: break-word;
}
Common confusing issue here is that we have 2 different css properties: word-wrap and word-break.
Then on top of that, word-wrap has an option called break-word.. Easy to mix-up :-)
Usually this worked for me, even inside a table:
word-break: break-word;
this might help,
css
.wrap-me{
word-break: break-all !important;
}
<table>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
</tr>
</thead>
<tbody>
<tr> <td class="wrap-me">tesetonlywithoutspacetesetonlywithoutspacetesetonlywithoutspace</td>
<td class="wrap-me">test only</td>
<td class="wrap-me">test with space long text</td>
<td class="wrap-me">Col 4</td>
<td class="wrap-me">Col 5</td>
<td class="wrap-me">Col 6</td>
<td class="wrap-me">Col 7</td>
</tr>
<tr>
<td class="wrap-me">test only</td>
<td class="wrap-me">test only</td>
<td class="wrap-me">test with space long text</td>
<td class="wrap-me">testwithoutspacetestonlylongtext</td>
<td class="wrap-me">Col 5</td>
<td class="wrap-me">Col 6</td>
<td class="wrap-me">Col 7</td>
</tr>
</tbody>
</table>
I found a solution that seems to work in Firefox, Google Chrome and Internet Explorer 7-9. For doing a two-column table layout with long text on the one side. I searched all over for similar problem, and what worked in one browser broke the other, or adding more tags to a table just seems like bad coding.
I did NOT use a table for this. DL DT DD to the rescue. At least for fixing a two-column layout, that is basically a glossary/dictionary/word-meaning setup.
And some generic styling.
dl {
margin-bottom:50px;
}
dl dt {
background:#ccc;
color:#fff;
float:left;
font-weight:bold;
margin-right:10px;
padding:5px;
width:100px;
}
dl dd {
margin:2px 0;
padding:5px 0;
word-wrap:break-word;
margin-left:120px;
}
<dl>
<dt>test1</dt>
<dd>Fusce ultricies mi nec orci tempor sit amet</dd>
<dt>test2</dt>
<dd>Fusce ultricies</dd>
<dt>longest</dt>
<dd>
Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per.
</dd>
</dl>
Using floating word-wrap and margin left, I got exactly what I needed. Just thought I'd share this with others, maybe it will help someone else with a two-column definition style layout, with trouble getting the words to wrap.
I tried using word-wrap in the table cell, but it only worked in Internet Explorer 9, (and Firefox and Google Chrome of course) mainly trying to fix the broken Internet Explorer browser here.
i have same issue this work fine for me
<style>
td{
word-break: break-word;
}
</style>
<table style="width: 100%;">
<tr>
<td>Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
Tables wrap by default, so make sure the display of the table cells are table-cell:
td {
display: table-cell;
}
style="table-layout:fixed; width:98%; word-wrap:break-word"
<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >
Demo - http://jsfiddle.net/Ne4BR/749/
This worked great for me. I had long links that would cause the table to exceed 100% on web browsers.
Tested on IE, Chrome, Android and Safari.
A solution which work with Google Chrome and Firefox (not tested with Internet Explorer) is to set display: table-cell as a block element.
You can try this if it suits you...
Put a textarea inside your td and disable it with background color white and define its number of rows.
<table style="width: 100%;">
<tr>
<td>
<textarea rows="4" style="background-color:white;border: none;" disabled> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</textarea>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
Just add width. This worked for me.
<td style="width:10%;"><strong>Item Name</strong></td>
If you only care about text, you can do it without table-layout:fixed
<table>
<tr>
<td>
Title
</td>
<td>
Length
</td>
<td>
Action
</td>
</tr>
<tr>
<td>
Long song name
</td>
<td>
3:11
</td>
<td>
<button>
Buy Now!
</button>
</td>
</tr>
<tr>
<td colspan=3>
<div style='width:200px;background-color:lime;margin-left:20px'>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>quick </div>
<div style='float:left;white-space:pre'>brown </div>
<div style='float:left;white-space:pre'>foxed </div>
<div style='float:left;white-space:pre'>jumped </div>
<div style='float:left;white-space:pre'>over </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>lazy </div>
<div style='float:left;white-space:pre'>brown </div>
<div style='float:left;white-space:pre'>cat </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
</div>
</td>
</tr>
<tr>
<td>
Long song name1
</td>
<td>
2:20
</td>
<td>
<button>
Buy Now!
</button>
</td>
</tr>
</table>
In my case, i had to use a combination of both word break and white space pre-wrap to achieve best results. Hope it helps many more.
<td class="wrap-longtext">
long,longlonglonglonglonglonglong..................
</td>
<style>
.wrap-longtext
{
word-break: break-all;/* Use break-word, if you prefer sensible text than short width of the cell */
white-space: pre-wrap;
}
</style>
I have divs as shown in the FIDDLE , the div content gets overlapped with the header resulting in hiding of the content data ie "Sample data 1".
<div id="header">
<div id="firstdiv">
<table border="0px" width="100%" style="background-color:rgb(2, 44, 72)">
<tr>
<td id="test1" style="width:90%;" align="left">test
</td>
</tr>
</table>
</div>
</div>
<div id="content">
<table border="0">
<tr>
<td>Sample data 1
</td>
</tr>
<tr>
<td>Sample data 2
</td>
</tr>
<tr>
<td>Sample data 3
</td>
</tr>
<tr>
<td>Sample data 4
</td>
</tr>
</table>
</div>
//CSS
#header
{
position:relative;
}
#firstdiv
{
float:left;width:100%;
position:absolute;
color:white;
}
Thanks
Remove the absolute positioning from the #firstdiv element. The left float also seems unnecessary.
See here: http://jsfiddle.net/k8Vut/2/
Add some padding to header: http://jsfiddle.net/k8Vut/3/
#header
{
padding-top: 25px;
}
Since your firstdiv is absolute it'll start from top: 0 position and hence overwrites the relative positioned header. So if you add some padding, it'll move the header a little below and make space for firstdiv
#main {
margin: auto;
padding: 0;
width: 95%;
}
#left-wrapper {
display: block;
}
#content {
height: 500px;
white-space: nowrap;
overflow-y: auto;
overflow-x: scroll;
}
<div id="main">
<table>
<tr>
<td>
<div id='left-wrapper'>
</div>
</td>
<td>
<div id='content'>
<table>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
The content wrapper contains a table which holds some data which size is unknown, and must not be wrapped so white-space:nowrap is set, and it works fine. The height of the content div has a fixed size and the vertical scrollbar appears ok. The main div's width is set to 95%. The problem is that the content div does not activates the scrollbar when the data is too long to fit, instead it resizes itself to the right side of the screen, even if the wrapper main div's width is set to 95%. Is there a way to activate the content div's horizontal scrollbar without setting it's width? It's maximum width should be in line with the width of the main wrapper, it would not be a problem even if it has a fixed width, but then it must fill the remaining area to be in line with it's wrapper main div which as I mentioned has it's width set to 95%.
I searched everywhere, days are passing and I simply can't figure out a right solution. Please if anyone has a suggestion I would appreciate it very much. Thanks.
The inner <div> will stay inside the container <div> with the CSS you have. But, because you have a <table> surrounding the inner <div> it doesn't behave as expected.
I think the solution may be to layout the page without the <table>.
This example shows the inner <div> being constrained inside the outer <div> using your current CSS.
<html>
<head>
<style>
#main {border:solid 2px orange; margin: auto; padding: 0; width: 190px;}
#left-wrapper {display: block;}
#content {border:solid 2px purple; height: 500px; white-space: nowrap; overflow-y: auto; overflow-x: scroll;}
</style>
</head>
<body>
<div id="main">
<div id='content'>
<table style="border:solid 1px #ddd;">
<tr style="background-color:#ccccff;">
<td>column A</td>
<td>column B</td>
<td>column C</td>
<td>column D</td>
<td>column E</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>2</td><td>3</td>
</tr>
<tr>
<td>11</td><td>12</td><td>11</td><td>12</td><td>13</td>
</tr>
</table>
</div>
</div>
</body>
</html>