Table Not Aligning to the Left in Article

Hello, New Version of SitePoint!

I’m back again with another brain buster! For some reason, the tables on my landing pages align well to the right side, but they appear to have trouble fitting on the left side.

Here are the styles in question (lines 175-287):


/* -------------------------------------------- *\\
    table .rating
\\* -------------------------------------------- */
.tablewrap {
    display:table;
	padding:8px 0 16px;
}
table.categories {
    border-spacing:0;   /* border-spacing: is the equivalent of the cellspacing attribute only better. */
    border-left:2px solid #ccc;    /* specifiying border properties (esp. color) makes them cross-browser consistent... */
    border-top:2px solid #ccc;     /* the shading of border-style: inset, outset, groove, and ridge vary considerably between browsers */
    border-right:2px solid #999;
    border-bottom:2px solid #999;
    margin:0 auto;
    width:70%;
}
.categories th,
.categories td {    /* these borders are also applied to the cells in the .rating (inner) table. */
    border-left:2px solid #999;
    border-top:2px solid #999;
    border-right:2px solid #ccc;
    border-bottom:2px solid #ccc;
 /* FYI: if {padding:0;} were applied here, it would be the equivalent of the cellpadding="0" attribute except that it would apply to all cells in both tables. */
}
.categories th {     /* Styles the title bar */
    font-size:1.5em;
    font-family:Georgia,serif;
    padding:6px 0;
}
.categories td.catcol1,    /* the .catcols are .categories columns */
.categories td.catcol2 {
    vertical-align:middle;
    font-weight:bold;
    font-family:Arial,sans-serif;
    text-align:center;
    padding:0 6px;
}
.categories td.catcol1 {
    border-right:0;    /* removes a border in .catcol1 that was globally applied. */
}
.categories td.catcol2 {
    border-left:1px dotted #aaa;    /* alters a border in .catcol2 that was globally applied. */
}
.categories td.catcol3 {
    border:0;    /* removes the borders inside .catcol3 that were globally applied. */
    background-color:#999;   /* background-color in case .ratings lifts from bottom because text wraps or is zoomed excessively. */
    padding:0;
}
.catcol2 {
    height:68px;    /* table-cells treat height as min-height.  This value is applied to approximately "equalize" the height of the .categories rows *because* Opera and Chrome will not equalize the height of these cells *because* the table height is set by the contents of the taller 3rd column cell that uses rowspan. */
    height:60px;    /* (Yes, this value overrides the one above it.  Comment out or delete this one to try the previous.  Experiment.)  At 60px, the bottom row is a little taller than the top 3 in Opera and Chrome but this will allow a little more text to wrap or zoom larger before the .ratings table lifts from the bottom. */
}
.catcol3 {
    vertical-align:top;
/*    width:40%;    /* Set a default width for table.ratings at wider .categories widths. The min-width applied to .ratings td {min-width:4.125em} will win at narrow widths. */
}

/* This is the inner table with the graphs */
table.ratings {
    width:100%;
    border-spacing:0;   /* border-spacing is the equivalent of the cellspacing attribute only better */
    font-weight:bold;
    font-family:Arial,sans-serif;
}
.ratings td {
    background-color:#fff;   /* background-color of the .rating cells, if desired. */
    text-align:center;
    min-width:4.125em;   /* if desired; value depends on min width allocated to text in .ratrow1 */
    width:33.3%;    /* Equalizes the width of the .ratings columns.  !IMPORTANT! This number MUST be adjusted to match the number of graphs!!! 4 graphs at 25% each, 3 graphs at 33% each, etc. */
}

/* .ratrow1 td cells hold the name of the graph. */
.ratingrow1 td {
    height:40px;       /* the minimum height of the .quality row */
    padding-bottom:2px;
    border-bottom:0;    /* this deletes the bottom border from the .quality cells */
}

/* .ratrow1 td span allows the rating number to be styled uniquely */
.ratingrow1 td span {
    display:block;
    font-size:1.2em;    /* set the size of the numerical rating here */
}

/* ratrow2 td cells hold the graph elements. */
.ratingrow2 td {
    border-top:0;    /* this deletes the top border from the .graph cells */
    vertical-align:bottom;
}

/* These are the graph elements */
.graph {
    height:240px;      /* same as the height of the colored bar and yaxis images */
	width:54px;
    position:relative;   /* creates a stacking context for the elements inside the .ratings table cells (because table cells cannot be positioned). */
    overflow:hidden;
}
.yaxis {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:url('yaxis.gif') no-repeat 100% 100%;   /* 180x240 */
}
.bar {
    width:100%;
    height:100%;
    position:absolute;
    right:25px;    /* offsets the right edge of the colored bar */
    bottom:0;
    background:url('bar.gif') repeat-x 0 100%;
}

RE: http://www.worldreviewgroup.com/dating/mate1seniorsreview2.html

The table with the graphs is centered in FF and Chrome. How are you viewing it?

What happens if you delete {display:table} and add {clear:both}?


.tablewrap {
    [color=red]display: table;[/color]
    [color=blue]clear:both;[/color]
    padding: 8px 0 16px;
}

Now, the table just hangs out at the bottom of the image on both of the landing pages, when it would nicely wrap to the text at wide viewport lengths, and then it would shrink a little bit and go to the bottom of the image when the viewport is narrow.


.tablewrap {
	clear:both;
	padding:8px 0 16px;
}

RE: http://www.worldreviewgroup.com/dati...rsreview2.html
This is what I see in FF:
https://www.dropbox.com/s/omzsxguuub1xz3h/tablegraph1.gif

Hey, Ty,

The y-axis grid-lines image is not being loaded… not found.
You have a horizontal graph colored gradient image instead of a vertical one and the .bar code seems to be for a horizontal image, too. Somethings wrong at home plate, bud. :slight_smile:

It should be much better now. I didn’t have the bar and y-axis images uploaded. Oops! :santa:

That’s how I see the table positioned, when I think it should wrap at wide viewport lengths. I tried adding width:50%; to .tablewrap , but it still doesn’t wrap like it was doing.

Ok, now I understand what you’re doing. Change {clear:both} back to {display:table}.

You can change the width of table.categories to 90 or even 100% if you wish to try that.

Thanks, Ron!

I guess the default display value of inline does not allow the table to flex and adjust while display:table; does?

If you’re talking about div.tablewrap, the default value of a div is block, that that would not have worked. display:table hugs its contents so it conforms to the width of table.categories.