1. OCAU Merchandise is available! Check out our 20th Anniversary Mugs, Classic Logo Shirts and much more! Discussion in this thread.
    Dismiss Notice

CSS/HTML advice, lease

Discussion in 'Programming & Software Development' started by TonyR, Dec 24, 2021.

  1. TonyR

    TonyR Member

    Joined:
    Jun 29, 2001
    Messages:
    762
    Location:
    NSW South Coast
    The attached file contains an HTML file created by a program I have written.

    Each of three tables has a two-column section at the bottom. The two columns display as different widths and the difference varies from ome table to the next.

    Could someone please advise how I can force the two columns to be the same size (50% each) so they line up vertically across the three tables.

    Any other constructive feedback on my HTLM/CSS skills will be welcomed.

    Thanks

    Tony
     

    Attached Files:

  2. OMGguru

    OMGguru Member

    Joined:
    Apr 1, 2003
    Messages:
    3,488
    Location:
    CFS
    Set to at least the first column "width: 50%;" in the style="" tags.

    edit: to clarify - the first 'td' element in each of the tables with 2 columns, just on the first row would be enough to force the rest

    P.S. if you add the styles to a CSS class then give those columns the class, you'd only have to add width: 50% to one place instead of all 3 tables
     
    Last edited: Dec 24, 2021
  3. OP
    OP
    TonyR

    TonyR Member

    Joined:
    Jun 29, 2001
    Messages:
    762
    Location:
    NSW South Coast
    Ah, I used column-width and it didn't work. Just width works properly


    Thanks for that.
     
  4. neRok

    neRok Member

    Joined:
    Aug 19, 2006
    Messages:
    4,323
    Location:
    Perth NOR
    Tips;
    1) You should use more general CSS rules, rather than per element styles.
    2) You should also include the major tags of a html file that wrap the content, which will also make styles work
    3) You shouldn't be using spaces (  ) like that. You can add padding to the cells instead.
    4) You have 1 "blank" row with 1 space in it that will collapse without its space, but you can replace it with a <br>.
    So, something like the following will get you started on these tips;
    HTML:
    <html>
       <head>
          <style>
             tr td:first-of-type {
                padding-left: 5em;
                width: 50%;
             }
             tr td:last-of-type {
                padding-right: 5em;
             }
          </style>
       </head>
       <body>
          ***your content here***
       </body>
    </html>
    
     
    Last edited: Dec 24, 2021
  5. OP
    OP
    TonyR

    TonyR Member

    Joined:
    Jun 29, 2001
    Messages:
    762
    Location:
    NSW South Coast
    Thanks for that. Padding is much cleaner than the &nbsp solution.

    I was trying to use indent and it didn't work for right-justified text. Padding works perfectly.
     

Share This Page

Advertisement: