Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Why is my table overflowing in Firefox and not in Google Chrome?

more options

My table is overflowing in Firefox and not in Google Chrome. Any ideas?

http://knickerbockernaples.com/new-home-page/

My table is overflowing in Firefox and not in Google Chrome. Any ideas? http://knickerbockernaples.com/new-home-page/

All Replies (7)

more options

Tables are inherently stretchy... to alter its natural behavior you could add style="table-layout: fixed; width: 100%;" to that table tag.

more options

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%;
more options

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?

more options

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?

more options

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.

more options

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 by cor-el

more options

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/