Community Forums › Forums › Archived Forums › General Discussion › Table Width in Enterprise Pro
Tagged: table widths
- This topic has 9 replies, 3 voices, and was last updated 8 years, 5 months ago by cotten999.
-
AuthorPosts
-
November 15, 2015 at 10:55 am #171159cotten999Member
I am using the Full Width Content Layout in Enterprise Pro. However even though my tables specify a max width <table width="208" border="0"> the table expands to the full width of the page.
I use Dreamweaver CSS 5.5 to create the tables.
How can I get the table to remain fixed as specified?
https://chicagology.com/19011919buildings/cityhallvii/
https://chicagology.com/19011919buildings/cityhallvii/November 15, 2015 at 4:54 pm #171220MarcyParticipantThe CSS that is controlling the table width is this in style.css line 458:
table { border-collapse: collapse; border-spacing: 0; line-height: 2; margin-bottom: 40px; width: 100%; }
You can add a max-width line with the max width that you want to it, but that will affect all your tables, so you may want to use the page-id, and add this below the section above:
.page-id-17987 table { max-width: 208px; }
Use whatever max-width you want for the table.
Marcy | Amethyst Website Design | Twitter
November 15, 2015 at 11:45 pm #171236cotten999MemberThank you, Marcy. That is a good solution, however I have several tables on the same page with varying sizes..
What would happen if I simply deleted the following?
table { border-collapse: collapse; border-spacing: 0; line-height: 2; margin-bottom: 40px; width: 100%; }
Thanks
November 15, 2015 at 11:52 pm #171237carasmoParticipantIf you have several on a page, the fastest thing would be to not set a width, but a max-width inline or give each one a class and a max-width. Don't use widths in pixels in responsive design, just percentages, ems, rems, and max-width.
<table style="max-width:280px" border=”0″>
or
<table class="class-for-table" border=”0″>
.class-for-table { max-width:280px; }
make a new class for each size, that way you can control them from the CSS file.
November 16, 2015 at 12:43 am #171240MarcyParticipantI only see one table on that page. It would not be a good idea to delete the table style.
Since you have a lot of tables, it will be easier if you use the inline approach that carasmo suggested.
<table style="max-width: 280px;" border=”0″>
Add a style with max-width to each of your tables.
That should be the easiest for you.
Marcy | Amethyst Website Design | Twitter
November 16, 2015 at 1:30 pm #171291cotten999MemberI forgot to mention. My sites are not "mobile responsive" and deleted the code after "Media Queries" in the CSS. The larger tables looked horrendous when reduced to 360px.
Re-formatting a site to fit mobile screen is a step backwards (BlackBerry's baby web). Today's high end mobile devices render desktop sites beautifully in landscape mode. I don't care if a person who uses a flip phone can't see the site correctly.
Back to topic, I'm not a coder, so if I understand correctly, all I have to do is add (change) the code for each table to reflect the max size as shown below and not touch the CSS.
<table style="max-width: 280px;" border=”0″>
Is that correct?
Thanks again for all your help.
November 16, 2015 at 1:37 pm #171293cotten999MemberThat is the solution I was looking for!
Thanks!!!
November 16, 2015 at 1:58 pm #171296MarcyParticipantGreat that you found a solution, Cotten999!
I do think that removing the @media is not a good solution.
A phone is only 480px in landscape, and that means half size. Zooming in and out is a pain, especially for anyone with bad eyes or anyone over 40. 🙂
Marcy | Amethyst Website Design | Twitter
November 16, 2015 at 2:17 pm #171297carasmoParticipantAs of April this year, Google penalizes mobile search results for sites that are not mobile friendly, and that doesn't mean that it looks great on small devices in whatever orientation, it's that the tap/click areas are at least 44px x 44px among other considerations. Google provides tools to check this.
Responsive tables have been addressed by many developers over the last 5 years, I use https://github.com/johnpolacek/stacktable.js/.
A phone is not just 480 in landscape, see http://mydevice.io/devices/ -- these are common.
November 16, 2015 at 2:30 pm #171298cotten999MemberHi Marcy thanks again for your help. Most of my charts are over 600px wide, so only a few are prone.
I don't understand formatting to 480px, though.
Today's phones (iPhone 6s, for example), has a display of 1334-by-750-pixel resolution at 326 ppi. These devices are made to display the full web. If I wanted my website to me more mobile friendly, I would built a customized app for it. Google is pushing the "mobile optimization" only to make their placed advertisements viewable on the gazillions of cheap smartphones which have very low resolution screens. Since my pages are 100% ad-free, this is not concern of mine.
I tried to use the @media code and the site on my iPhone looked horrible. Images reduced, but the paragraphs were re-formated to fit a tiny screen like an e-book, plus the tables were crunched together and were totally unreadable (the exact opposite of my original post).
It all comes down to the content, I guess. My sites are informational and contain charts and images and are meant to viewed on a larger screen (or be zoomable).
Thanks again.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.