How do I limit table width?

  • Resolved davidbe929

    (@davidbe929)


    12 years, 5 months ago

    I used width=”590″ in a table but the table came out much wider. It is not due to items inside the table being too wide. Here is the post (the colored section is the part that is obviously too wide):
    http://blog.nss.org/?p=4260
    Information on how to fix this would be greatly appreciated. Thanks.

Viewing 8 replies - 1 through 8 (of 8 total)
  • WPyogi

    (@wpyogi)

    12 years, 5 months ago

    Your theme sets table width in this CSS:

    #content table {
    border: 1px solid #E7E7E7;
    margin: 0 -1px 24px 0;
    text-align: left;
    width: 100%;
}

    Thread Starter davidbe929

    (@davidbe929)

    12 years, 5 months ago

    I changed the CSS above from “width: 100%;” to “width: 590px;” and it made no difference.

    How do I fix it? Thanks.

    WPyogi

    (@wpyogi)

    12 years, 5 months ago

    If you add up the widths you have in that table – it’s bigger than 590.

    Images are 280 and you have padding of 24 (times 4).

    BTW, you really may want to avoid using tables at all – for layout, CSS is a much better way to go.

    Thread Starter davidbe929

    (@davidbe929)

    12 years, 5 months ago

    The width of everything in the table comes to 594 pixels, so I miscalculated by 4 pixels, but that does not account for the problem I am having. I can definitely live with 594 pixels! But the table displays much wider than that. The question still remains: How can I fix it so it displays at 594 pixels wide? I tried adjusting the CSS as mentioned above without success.

    WPyogi

    (@wpyogi)

    12 years, 5 months ago

    By my count:

    280 + 280 + 24 + 24 + 24 + 24 + 1 + 1 = 658

    Maybe you’re not counting this padding:

    #content tr td {
    border-top: 1px solid #E7E7E7;
    padding: 6px 24px;
}

    and the border here:

    #content table {
    border: 1px solid #E7E7E7;
    margin: 0 0 24px;
    text-align: left;
    width: 590px;
}

    Thread Starter davidbe929

    (@davidbe929)

    12 years, 5 months ago

    Aha, I see. I tried removing all the CSS below and that had no effect either.

    #content table {
	border: 1px solid #e7e7e7;
	margin: 0 -1px 24px 0;
	text-align: left;
	width: 100%;
}
#content tr th,
#content thead th {
	color: #888;
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
	padding: 9px 24px;
}
#content tr td {
	border-top: 1px solid #e7e7e7;
	padding: 6px 24px;
}
#content tr.odd td {
	background: #f2f7fc;

    So I still don’t have a solution.

    WPyogi

    (@wpyogi)

    12 years, 5 months ago

    You really should not be modifying theme files – your changes will all be lost when the theme is updated. So start by installing a custom CSS plug – like this one:

    http://wordpress.org/plugins/custom-css-manager-plugin/

    Then ADD this CSS there:

    #content tr td {
    padding: 0px 0px;
}

    You may want to adjust those to something a bit bigger so the text isn’t right to the edge.

    Thread Starter davidbe929

    (@davidbe929)

    12 years, 5 months ago

    Voila! That did the trick! Many thanks. Topic resolved. Should prove useful for other things as well. Thanks again.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘How do I limit table width?’ is closed to new replies.