Results 1 to 4 of 4

Thread: HTML/CSS - Table - always more than expected

  1. #1

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    HTML/CSS - Table - always more than expected

    Hi

    I'm using Bootstrap to limit columns etc. but I seem to be having a problem in how the browser calculates what it can display?

    up to the point I put a table in, it seems to work fine, getting the widths properly, using overflow to hide or scroll etc.
    But as soon as I put a table in with a % defined width, the tables calculated width gets propogated up through the parents. This messes with the %...
    So either its something that is always there or I'm missing something.

    Any pointers?

    I've already read this table layout...

    BOFH Now, BOFH Past, Information on duplicates

    Feeling like a fly on the inside of a closed window (Thunk!)
    If I post a lot, it is because I am bored at work! ;D Or stuck...
    * Anything I post can be only my opinion. Advice etc is up to you to persue...

  2. #2
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: HTML/CSS - Table - always more than expected

    I am having difficulty following what you mean. Is there anyway that you could provide sample code with a fiddle or a picture of what you want versus what is actually happening?
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: HTML/CSS - Table - always more than expected

    Tables stink. I've had nothing but problems with tables that have led me to this solution.

    Use DIV's properly instead.

    Here is my DIV-in-a-GRID CSS - the first part sets up how a ACS-GRID... is generally going to behave.

    Code:
    .acs-grid {
    
    }
    
    .acs-grid * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    .acs-grid .acs-cell-money {
        padding-right: 8px; 
    }
    
    [class*='acs-grid-col-'] {
        float: left;
    }
    
    .acs-grid:after {
        content: "";
        display: table;
        clear: both;
    }
    
    [class*='acs-grid-col-'] {
      padding-right: 2px;
      min-height: 1px;
    }
    [class*='acs-grid-col-']:last-of-type {
      padding-right: 0;
      min-height: 1px;
    }
    And the rest of this gives you a bunch of handy "percent" breakdowns to use for each column.

    Code:
    .acs-grid-col-1-3 {
        width: 33.33%;
    }
    
    .acs-grid-col-2-3 {
        width: 66.66%;
    }
    
    .acs-grid-col-3-4 {
        width: 75%;
    }
    
    .acs-grid-col-1-2 {
        width: 50%;
    }
    
    .acs-grid-col-1-4 {
        width: 25%;
    }
    
    .acs-grid-col-1-8 {
        width: 12.5%;
    }
    
    .acs-grid-col-1-10 {
        width: 10%;
    }
    
    .acs-grid-col-5 {
        width: 5%;
    }
    
    .acs-grid-col-10 {
        width: 10%;
    }
    
    .acs-grid-col-15 {
        width: 15%;
    }
    
    .acs-grid-col-20 {
        width: 20%;
    }
    
    .acs-grid-col-25 {
        width: 25%;
    }
    
    .acs-grid-col-30 {
        width: 30%;
    }
    
    .acs-grid-col-35 {
        width: 35%;
    }
    
    .acs-grid-col-40 {
        width: 40%;
    }
    
    .acs-grid-col-45 {
        width: 45%;
    }
    
    .acs-grid-col-50 {
        width: 50%;
    }
    
    .acs-grid-col-55 {
        width: 55%;
    }
    
    .acs-grid-col-60 {
        width: 60%;
    }
    
    .acs-grid-col-65 {
        width: 65%;
    }
    
    .acs-grid-col-70 {
        width: 70%;
    }
    
    .acs-grid-col-75 {
        width: 75%;
    }
    
    .acs-grid-col-80 {
        width: 80%;
    }
    
    .acs-grid-col-85 {
        width: 85%;
    }
    
    .acs-grid-col-90 {
        width: 90%;
    }
    
    .acs-grid-col-95 {
        width: 95%;
    }
    
    .acs-grid-col-100 {
        width: 100%;
    }
    Attached Images Attached Images  

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  4. #4
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: HTML/CSS - Table - always more than expected

    Here is how it looks in the browser...
    Attached Images Attached Images  

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width