FANDOM


  • 72e

    Hi there, I am working on styling a table with CSS as seen here: http://onmyoji.wikia.com/wiki/Template:StatBox/Draft

    The CSS in question is:

    .stats {
     margin-top:-75px;
     margin-bottom:25px;
     border-collapse:collapse 
    }
    .stats td,.stats th {
     vertical-align:middle;
     height:35px;
     padding:1px 5px;
     border:none;
     position:relative 
    }
    .stats tr:not(:first-child) th:nth-child(1),.stats tr:not(:first-child) td:nth-child(3),.stats tr:not(:first-child) td:nth-child(5) {
     text-align:right 
    }
    .stats tr:not(:first-child) th:nth-child(2),.stats tr:not(:first-child) td:nth-child(4),.stats tr:not(:first-child) td:nth-child(6),.stats tr:not(:first-child) td:nth-child(7) {
     text-align:left 
    }
    .stats tr:not(:first-child) th:nth-child(n),.stats tr:not(:first-child) td:nth-child(n) {
     border-bottom-style:solid;
     border-width:1px;
     border-color:#ccc;
    }
    .stats tr:not(:first-child) th:nth-child(1),.stats tr:not(:first-child) td:nth-child(3),.stats tr:not(:first-child) td:nth-child(5) {
     padding-left:10px;
    }
    .stats tr:not(:first-child) th:nth-child(2),.stats tr:not(:first-child) td:nth-child(4),.stats tr:not(:first-child) td:nth-child(7) {
     padding-right:10px;
    }
    .stats tr:not(:first-child) td:nth-child(7) {
     color:#ca0000;
    }
    .stats tr:not(:first-child) th:nth-child(1),.stats tr:not(:first-child) td:nth-child(3),.stats tr:not(:first-child) td:nth-child(5) {
     width:40px
    }
    .stats tr:not(:first-child) td:nth-child(4),.stats tr:not(:first-child) td:nth-child(6),.stats tr:not(:first-child) td:nth-child(7) {
     width:60px
    }
    .stats tr:first-child th:nth-child(2),.stats tr:first-child th:nth-child(4) {
     width:14% 
    }

    For a clearer representation of where the columns and rows are, the same table using the mw-datatable class: http://onmyoji.wikia.com/wiki/Template:StatBox/Draft2

    I am individually setting the alignment and widths according to the table's rows and columns, but as can be seen from Firefox's Style Editor for the last two tables on the first link, the column numbers end up changing due to the colspans, and ruins the styling.

    Is there anyway to make this work other than adding in extra columns?

      Loading editor
    • after all ur css:
      tr td:nth-last-child(2) {
          text-align: right;
      }
      tr td:nth-last-child(1) {
          text-align: left;
      }
      last-child(n) - n child from the last one.
        Loading editor
    • 72e

      Hi Fngplg, I've tried that and it does not work, as while it fixes the third table, it will ruin the second, which also uses colspan and thus has messed up column numbers.

        Loading editor
    • most simplier solution will be different classes for tables. u have 2 table layouts: w\ colspan at middle of the table and w\ colspan at end. set 2 different classes and style it.

        Loading editor
    • 72e

      Hi Fngplg, I've made two more classes for the different conditions and they work great! Thanks so much for the help!

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message