Web Analytics Made Easy -
StatCounter How can I reduce the width of this table ? - CodingForum

Announcement

Collapse
No announcement yet.

How can I reduce the width of this table ?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How can I reduce the width of this table ?

    Hi,

    Inspecting my table rows they seem to be set at 1135px.

    I have tried to set the table width at 800px but it has no effect
    Also I tried changing other widths but can not get the table to be more narrow.

    As you can see there is an overlap of the sub-form list and the main table.

    Can you see where I need to set the width for this table ?

    The web address is My forum table

    Many thanks.
    David
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    The problem is not your table but the formatting of the contents of that table, specifically this rule:

    Code:
    h2,h3,h4,h5 {
    	text-align:left;
    	[B][COLOR="#FF0000"]width:800px;[/COLOR][/B]
    	text-transform:capitalize;
    	font-weight:bold;
    	font-family:helvetica;
    	margin:10px 0 0px 0;
    	}
    Stop solving problems you don’t yet have!

    Comment


    • #3
      I seen some attributes not closed. Many times have been told by the good people here to run a validator. https://validator.w3.org/

      Comment


      • #4
        Thanks for your replies ...

        I think I have got rid of the errors
        shown in the validator ...

        and I changed the headings to ..

        h2,h3,h4,h5 {
        text-align:left;
        width:300px;
        text-transform:capitalize;
        font-weight:bold;
        font-family:helvetica;
        margin:10px 0 0px 0;
        }

        BUT I still have a wide table !!
        If you want to attract and keep more clients, then offer great customer support.

        Support-Focus.com. automates the process and gives you a trust seal to place on your website.
        I recommend that you at least take the 30 day free trial.

        Comment


        • #5
          I don’t see the changes in your original link. The question is why you assign a width to the headings at all?
          Stop solving problems you don’t yet have!

          Comment


          • #6
            Originally posted by VIPStephan View Post
            The problem is not your table but the formatting of the contents of that table, specifically this rule:
            A rule issue that wouldn't come up if they were using semantic markup and numbered headings properly... what makes the content of a TH the "heading that everything on the page or inside this <section> tag is a subsection of"? H1 inside a TH is from a semantic markup point of view complete gibberish. Just like how a H3 inside a P is gibberish, or how if you have headings it's probably not tabular data...

            The markup for that table is non-semantic nonsense, and the results in trying to style it reflect that. It ALMOST looks like you chose to use numbered headings not for what they mean, but instead for what they look like; and that's NOT how HTML is supposed to be used.

            Same goes for the pointless aria role nonsense that would be redundant if the HTML were used properly, title tags for nothing on elements that shouldn't even have title, the presence of inline style, tags like <u> that haven't existed since 1998 (that leaves people trying to click on that text thinking it's an anchor), lack of THEAD, TBODY or SCOPE and really the whole rest of the document -- particularly that massive train wreck inside the <style> attribute at the top telling caching models to go plow themselves.

            The aria role nonsense is such a laugh... really, an <img> tag is a "image", who knew?!? That really needs a itemprop to say that?

            It's another example of a site that if someone brought to me as a client, I'd tell them to pitch the entire mess and start over.

            BUT, addressing JUST your table:

            Code:
            <table class="postList">
            	<caption>
            		<span>Inline Skating<span> - aggressive rollerblades dunhams
            	</caption>
            	<thead>
            		<tr>					
            			<th scope="col">This Forum</th>
            			<th class="postForum">Adjustable Rollerblades Craigslist</th>
            			<th>Replies</th>
            			<th>Views</th>
            		</tr>
            	</thead><tbody>
            		<tr>
            			<td rowspan="2">
            				<a
            					rel="nofollow"
            					href="/adjustable-rollerblades-craigslist-/cheap-inline-skates-melbourne/p4pg2307.html"
            				>
            					<img
            						src="http://combld.com/images/rolberbtracerboyph1-zxz-Get-The-Best-Price-For-Aggressive-Inline-Skates--How-Can-I-Buy-Rollerblades-.jpg"
            						alt="Inline Skates For 4 Year Old"
            						width="100" height="100"
            					>
            				</a>
            			</td>
            			<th scope="row">
            				<div>
            					Post:
            					<a
            						rel="nofollow"
            						href="/adjustable-rollerblades-craigslist-/cheap-inline-skates-melbourne/p4pg2307.html"
            					>
            						Cheap Inline Skates Melbourne
            					</a>
            				</div>
            				Inline Skates Albany Ny<br>
            				<br>
            				good value top of the range in-line skate
            			</th>
            			<td rowspan="2">0</td>
            			<td rowspan="2">132</td>	
            		</tr><tr>
            			<td>
            				Roller Derby Tracer Roller Blades: terrific great cost performance. Thيs <a rel="nofollow" href="http://combld.com/linker.php?pge=2307&amp;pt=4&amp;ct=23&amp;ln=49"> fine quality style </a> grows with the increase of the young ones feet. Enjoy using for a long period. The non-rigid wheels let young ones to quite easily move over all types of things. The uncomplex fastening system will make this swift to put on the inline blade skates. It is without question easy to pull off the rollerblades. <strong>Roller Derby Tracer Roller Blades </strong>  a very desirable skate for the purpose of more than a couple explanations.
            			</td>
            		</tr>
            		
            		<tr>
            			<td rowspan="2">
            				<a 
            					rel="nofollow"
            					href="/adjustable-rollerblades-craigslist-/what-is-the-best-price-for-rollerblades-for-sale/p4pg2308.html"
            				>
            					<img
            						src="http://combld.com/images/rolberbtracerboyph2-zxz-Get-The-Best-Price-For-Aggressive-Inline-Skates--How-Can-I-Buy-Rollerblades-.jpg"
            						alt="Inline Skates For 4 Year Old"
            						width="100" height="100"
            					>
            				</a>
            			</td>
            			<th scope="row">
            				<div>
            					Post:
            					<a
            						rel="nofollow"
            						href="/adjustable-rollerblades-craigslist-/what-is-the-best-price-for-rollerblades-for-sale/p4pg2308.html"
            					>
            						What Is The Best Price For Rollerblades For Sale
            					</a>
            				</div>
            				Rollerblades Best Tricks In Soccer<br>
            				<br>
            				great cost performance high-quality roller blade
            			</th>
            			<td rowspan="2">0</td>
            			<td rowspan="2">108</td>	
            		</tr><tr>
            			<td>
            				Roller Derby Tracer Roller Blades: excellent great value for money. Thىs <a rel="nofollow" href="http://combld.com/linker.php?pge=2308&amp;pt=4&amp;ct=23&amp;ln=49"> high caliber style </a> can change with the increase of thë young ones size of foot. Long-lasting. The non-stiff wheels grant younger ones to incredibly easily go over more or less all models of stuff. Thê uncomplex tying technique can make this super quick to wear thë inline skates. It is undoubtedly very easy to remove the blades. <strong>Roller Derby Tracer Roller Blades </strong> are definitely a superior inline roller skate for the purpose of quite a lot of justifications.
            			</td>
            		</tr>
            		<!--- etc, etc, etc -->
            	</tbody>
            </table>
            Is semantically about all that really should be there. You aren't starting new subsections or labelling <section>, so numbered headings have no business in there.

            Everything else you are doing belongs in an external stylesheet targeting off the parent class. Unfortunately you seem to be using a lot of global styling which means you'll end up having to waste a lot of time unsetting undesired values.

            OF course if you don't want to fix anything and just sleaze by on a silver bullet, set:

            Code:
            table h1,
            table h2,
            table h3,
            table h4,
            table h5,
            table h6 { width:auto; }
            But that's a bit like trying to treat a wound from a 50mm Barret with a rolled up sheet and duct tape.

            Really that entire page is fundementally flawed thanks to non-semantic markup, lack of separation of presentation from content, and a willy-nilly mix of old and new methods that don't play well together... some of those "new" techniques serving no legitimate purpose and just wasting bandwidth if you had semantic markup in the first place.
            Walk the dark path, sleep with angels, call the past for help.
            https://cutcodedown.com
            https://medium.com/@deathshadow

            Comment


            • #7
              Ha ha ha

              "particularly that massive train wreck inside the <style> attribute at the top telling caching models to go plow themselves"

              love it !!!

              But what is this tells the table to reduce it's width ?

              Or was it the h1 .... h6 that was forcing it to be wide when otherwise
              it would have floated to the correct width ?

              deathshadow : You started off with the class="postList
              But without knowing what you put in the class,
              I can not really benefit from it.
              Last edited by jeddi; Sep 12, 2016, 02:53 PM.
              If you want to attract and keep more clients, then offer great customer support.

              Support-Focus.com. automates the process and gives you a trust seal to place on your website.
              I recommend that you at least take the 30 day free trial.

              Comment


              • #8
                Originally posted by jeddi View Post
                But what is this tells the table to reduce it's width ?

                Or was it the h1 .... h6 that was forcing it to be wide when otherwise
                it would have floated to the correct width ?
                Tables ALWAYS expand to fit their content, regardless of what you set for width. In general, width on a table behaves more like min-width. If you have something bigger inside it than you declare the table WILL get bigger. Period. Sucks, huh?

                That's why globally declaring things like widths on semantic level elements like h1..h6 is rubbish and should be avoided. Have a single wrapper that EVERYTHING sizes to, don't try to size the semantic elements themselves unless you REALLY know what you are doing.

                Originally posted by jeddi View Post
                You started off with the class="postList But without knowing what you put in the class, I can not really benefit from it.
                That would involve rewriting your entire CSS, which is spread out over so many classes I didn't take the time to do so. You seemed to be globally styling things blindly, instead of targeting off of parent wrappers... and that's a good deal of what's biting you.

                I could make some example CSS, but really the above markup should provide ALL the hooks you need to provide the correct style translating your current CSS to match it.

                Though really again, I'd toss that entire site and start over. It would be faster to rewrite the entire page from scratch than it would be to extract your existing style and try to make that one table behave. PARTICULARLY given what a giant middle finger to accessibility and semantics that markup is and all the extra bloat that's in the markup for no reason.

                Particularly with it being a bizzaroland mix of HTML 3.2, 4 Tranny, and 5 methodologies. (whilst I'm a 4 Strict guy who only deploys in 5)

                Much less things like the bloated keyword stuffing making things like the page's title attribute useless to visitors and completely missing the point, or the bloated keywords meta guaranteed to get you ignored or slapped down by search for abuse.

                It's got problems galore. You'd almost think it was made using turdpress. (Not a fan, and hodge-podges of broken methodology like this are a hefty chunk of why!)
                Last edited by deathshadow; Sep 12, 2016, 03:32 PM.
                Walk the dark path, sleep with angels, call the past for help.
                https://cutcodedown.com
                https://medium.com/@deathshadow

                Comment


                • #9
                  Thanks for your replies.

                  I decided to scrape the table layout.

                  Mainly because the Header tags are not appropriate in the table
                  and the headers are more important.

                  So I used bordered sections instead of the table.

                  The CSS is being used to style many different pages which is why
                  it looks bloated - I will try and reduce it.

                  Also I will validate and correct the mistakes.

                  Thanks again !!
                  If you want to attract and keep more clients, then offer great customer support.

                  Support-Focus.com. automates the process and gives you a trust seal to place on your website.
                  I recommend that you at least take the 30 day free trial.

                  Comment

                  Working...
                  X