1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to adjust table column width with CSS

Discussion in 'HTML & Website Design' started by tony-sar, Dec 4, 2020.

  1. #1
    HELLO.
    Site that im working on , contains many products and each product has its own Specification table that are being imported into database. I need to change the column width of the table using CSS . i can not go to each product and change tables properties .. i used
    td:nth-child(1) in the css file. using this i can change many properties in the table but width of the column is not changing ? would appreciate any info on this . bellow is the link to a page.
    https://tekwar.ca/mfv-straight-flow-400ml-air-12ml-water-brass-metering-valves.html
    SEMrush
     
    tony-sar, Dec 4, 2020 IP
    SEMrush
  2. sarahk

    sarahk iTamer Staff

    Messages:
    26,758
    Likes Received:
    4,068
    Best Answers:
    115
    Trophy Points:
    665
    #2
    Why not update the template/theme?

    upload_2020-12-6_15-0-20.png

    When I mess around using the inspect tool in my browser I can do this
    upload_2020-12-6_15-3-44.png
    What that shows me is that the browser is going to apply the style rules AFTER the css rules.

    If you can clear the style from the HTML then you can do what you like using css.
     
    sarahk, Dec 5, 2020 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,463
    Likes Received:
    1,917
    Best Answers:
    246
    Trophy Points:
    515
    #3
    That HTML is a total ****show. My advice would be to pitch it all in the trash and start over. Here's a tip, 99% of the time you see style="" slopped all over the markup, you're looking at developer ignorance, incompetence, and ineptitude. Much less the nonsense of declaring height on elements that don't even ACCEPT CSS heights. (why do people do this?!?)

    You don't even have the proper semantics, since that first TD per TR should likely be a TH with SCOPE="ROW" on it.

    Much the same could be said for those "DIV for NOTHING" surrounding it, more nonsensical/pointless height declarations, and the use of PX metrics telling users with accessibility needs to go f*** themselves.

    There is ZERO reason for the markup of that section to be more than:

    <table class="technicalSpecs">
    	<tr>
    		<th scope="row">Flow Pattern:</th>
    		<td>Straight (T)</td>
    	</tr><tr>
    		<th scope="row">Body:</th>
    		<td>Chrome Plated Brass</td>
    	</tr><tr>
    		<th scope="row">Valve Needle:</th>
    		<td>316 Stainless steel</td>
    	</tr><tr>
    		<th scope="row">Orifice:</th>
    		<td>316 stainless steel with PTFE liner for valve sizes 1, 2 and 3; PCTFE for valve sizes 4,5,6 and 7.</td>
    	</tr><tr>
    		<th scope="row">O-Rings:</th>
    		<td>Buna-N®</td>
    	</tr><tr>
    		<th scope="row">Maximum Flow (mL/min):</th>
    		<td>400ml Air - 12ml Water</td>
    	</tr><tr>
    		<th scope="row">Orifice Size:</th>
    		<td>0.042 inch</td>
    	</tr><tr>
    		<th scope="row">CV:</th>
    		<td>0.001</td>
    	</tr><tr>
    		<th scope="row">Maximum Pressure:</th>
    		<td>500 psig (3792 kPa).</td>
    	</tr><tr>
    		<th scope="row">Maximum Temperature:</th>
    		<td>180 °F (82 °C) -brass.</td>
    	</tr><tr>
    		<th scope="row">Valve Stem:</th>
    		<td>Sixteen turns, non-rising type.</td>
    	</tr>
    </table>
    Code (markup):
    With everything else declared ONCE in your external stylesheet.

    Again though, with that entire site being a giant middle finger to users with accessibility needs, you need to throw it ALL away before you get your tuchas sued off under laws like the US ADA or UK EQA. The content itself is fine, but the way that site is coded just tells large swaths of users to sod off!

    Particularly if we start talking about the broken scripttardery that only further tells users to kiss themselves where the sun doesn't shine.

    Hardly a shock that page you linked to is vomiting up 55k of markup for 1.4k of content and one content image -- not even 5k of HTML's flipping job! Goes hand in hand with the batshit ridiculous 2.5 MEGABYTES of JavaScript spread out over 200 separate files, and the equally derpy half a megabyte of CSS when NO legitimate website really needs more than 48k of the stuff.

    It's a train wreck laundry list of how NOT to code a website. You'd almost think it was a vanilla magento install...

    Apologies if that comes across as unduly harsh, but I figured SOMEBODY ought to tell you this so you can stop bending yourself over the counter.
     
    deathshadow, Dec 8, 2020 IP
    malky66 likes this.