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...

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?

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%;
}

---

Here is how it looks in the browser...