WordPress.org

Ready to get started?Download WordPress

Forums

For anyone interested in formatting tables in twentyten (3 posts)

  1. scworldnetter
    Member
    Posted 3 years ago #

    This may save others considerable amount of time. If you have ever had trouble formatting your tables inside content divs, i.e. inside your posts, and wondered why some properties simply can't be set on your tables.

    Well, the trouble with twentyten is that the table attributes should not be specified inside the content id. The content id should only contain the minimum amount of layout so that posts can be free to contain whatever should be in a post. In other words, the content div should impose only the most minimal set of formatting conditions. It is not possible to override some properties defined in ids.

    Here is what I had to do in order to be able to create special tables.

    1) Remove the table attributes out of the #content section and put them in a class with a new name (so that if you do want tables that have the best matching look and feel for twentyten).

    So the following code:

    #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 #000000;
    	padding: 6px 24px;
    }
    #content tr.odd td {
    	background: #f2f7fc;
    }

    needs to be removed, (100% safe to do since the layout is div based and not table based) and the class code can be added:

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

    Now, you are free to use <table class="twentytentable"> for tables that need to take on the matching twentyten look and feel, and you can also define any other table styles of your choosing, and they will look just the way you want them to.

    It would be great if this was eventually fixed in a future release. I've seen countless posts from poor users who wonder why their tables simply won't take on the look that they have specified inline or in CSS.

  2. one too many
    Member
    Posted 3 years ago #

    Instead of:
    #content tr td{...}
    you should use:
    #content tr, #content td{...}
    It works for me!

    Although original works for header cells, but only for them, just fine.

  3. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Well, the trouble with twentyten is that the table attributes should not be specified inside the content id. The content id should only contain the minimum amount of layout so that posts can be free to contain whatever should be in a post. In other words, the content div should impose only the most minimal set of formatting conditions. It is not possible to override some properties defined in ids.

    While, as a general rule, the less CSS specificity the better, this statement is untrue:

    It is not possible to override some properties defined in ids.

    Unless the CSS is defined inline (which TwentyTen does not do), it is entirely possible to override such CSS definitions.

    In your Child Theme's style sheet, the first thing that happens is importing the TwentyTen style.css.

    Anything that you add after that import, that has equal or greater specificity, will override the default.

    In other words, if you want to override this in TwentyTen's style.css:

    #content table {
    	/* CSS definitions */
    }
    #content tr th,
    #content thead th {
    	/* CSS definitions */
    }
    #content tr td {
    	/* CSS definitions */
    }
    #content tr.odd td {
    	/* CSS definitions */
    }

    Simply re-declare exactly the same selectors in your Child Theme's style.css, and you will override them.

Topic Closed

This topic has been closed to new replies.

About this Topic