Why is my table overflowing in Firefox and not in Google Chrome?
My table is overflowing in Firefox and not in Google Chrome. Any ideas?
All Replies (7)
Tables are inherently stretchy... to alter its natural behavior you could add style="table-layout: fixed; width: 100%;" to that table tag.
Note that you can use the built-in Inspector to test this.
Right-click the table and click the element {} and paste those two rules via Ctrl+V (you can do this in one paste action).
- table-layout: fixed; width: 100%;
jscher2000 said
Tables are inherently stretchy... to alter its natural behavior you could add style="table-layout: fixed; width: 100%;" to that table tag.
is this something that needs to be changed in css or in html?
It's your choice. You can add that as an inline style tag right into the HTML, or you can enter into into a style sheet. To use it in a style sheet, you probably want to create a more specific selector for that table such as an id or class name so other tables are not affected by those rules. Does that make sense?
jscher2000 said
It's your choice. You can add that as an inline style tag right into the HTML, or you can enter into into a style sheet. To use it in a style sheet, you probably want to create a more specific selector for that table such as an id or class name so other tables are not affected by those rules. Does that make sense?
Not really .. Sorry I'm very visual especially when learning something the first time.
The page source shows:
<table border="0"> <tbody> <tr >
- Firefox > Web Developer > Page Source
- Tools > Web Developer > Page Source (Ctrl+U)
- right-click on a web page and select View Page Source in the context menu
You can edit the main HTML file and add the above posted style attribute to the table tag.
<table border="0" style="table-layout: fixed; width: 100%;"> <tbody> <tr>
See also:
Modified
Since you have a commercial theme, you might want to get this changed by your vendor so you don't have to do a custom change. They claim to offer "Unparalleled Support": http://www.elegantthemes.com/gallery/chameleon/