Results 1 to 4 of 4

Thread: Table Troubles

  1. #1
    Join Date
    Apr 2012
    Location
    Central New Jersey
    Posts
    295
    Thanks
    104
    Thanked 3 Times in 3 Posts

    Default Table Troubles

    The code below I want applied to only class mentable, but the nth-child statements are being applied to the entire page. Can someone kindly discern my mistake?


    Code:
    table.mentable th {
    	border-style: solid;
    	border-width: 1px;
    	border-color: #848482;
    	margin: auto;
    	text-align: center;
    }
    
    table.mentable td {
    	border-style: solid;
    	border-width: 1px;
    	border-color: #848482;
    	margin: auto;
    	text-align: center;
    }
    
    table.mentable th:nth-child(1), td:nth-child(1) {
    	width:18%;
    }
    
    table.mentable th:nth-child(2), td:nth-child(2) {
    	width:50%;
    }
    
    table.mentable th:nth-child(3), td:nth-child(3) {
    	width:32%;
    }
    The page in question is https://www.marainlaw.com/page.php?here=test (The code above is not presently in my live css file, as it undesirably alters all the other pages in the domain.)
    Last edited by marain; 01-18-2022 at 02:42 PM. Reason: To Mark Resolved

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,136
    Thanks
    3
    Thanked 278 Times in 271 Posts

    Default

    Hi there marain,

    you don't need all that nth-child stuff.
    The dimensions of the cells are defined by the the content.

    If you don't want to effect other pages, code it like this...

    HTML
    Code:
    <table title="Comparison of Criminal Record Expungements with Mental Health Record Expungements">
     <caption>Collatz Calculations</caption>
     <thead>
      <tr>
       <th>Argument</th>
       <th>Stops</th>
       <th>Explanation</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>1</td>
       <td>0</td>
       <td>1</td>
      </tr><tr>
       <td>2</td>
       <td>1</td>
       <td>1</td>
      </tr><tr>
       <td>3</td>
       <td>7</td>
       <td>10  5  16  8  4  2  1</td>
      </tr><tr>
       <td>4</td>
       <td>2</td>
       <td>2  1</td>
      </tr><tr>
       <td>5</td>
       <td>5</td>
       <td>16 8 4 2 1</td>
      </tr><tr>
       <td>6</td>
       <td>10</td>
       <td>3  10  5  16  8  4  2  1</td>
      </tr><tr>
       <td>7</td>
       <td>16</td>
       <td>22  11  34  17  52  26  13  40  20  10  5  16  8  4  2  1</td>
      </tr><tr>
       <td>19</td>
       <td>20</td>
       <td>58  29  88  44  22  11  34  17  52  26  13  40  20  10  5  16  8  4  2  1</td>
      </tr><tr>
       <td>21</td>
       <td>7</td>
       <td>64  32  16  8  4  2  1</td>
      </tr><tr>
       <td>23</td>
       <td>15</td>
       <td>70  35  106  53  160  80  40  20  10  5  16  8  4  2  1</td>
      </tr>
     </tbody>
    </table>
    CSS
    Code:
    body {
        font: normal 1em / 1em sans-serif;
     } 
    table[title*="Comparison of Criminal Record"] {
        width: 90%;
        margin: auto;
        border: 2px solid #000;
        border-collapse: collapse;
        text-align: center;
     }
    table[title*="Comparison of Criminal Record"] caption {
        margin-bottom: 1em;
     }
    table[title*="Comparison of Criminal Record"] th, 
    table[title*="Comparison of Criminal Record"] td {
        padding: 0.5em 0.25em;
        border: 1px solid #848482;
     }
    You can see an example here...

    Full Page View
    https://codepen.io/coothead/full/OJxqKZV

    Editor View
    https://codepen.io/coothead/pen/OJxqKZV

    If the CSS attribute selector looks unusual to you, read about it here...

    MDN - CSS Attribute Selectors

    coothead
    Last edited by coothead; 01-18-2022 at 09:27 AM.
    ~ the original bald headed old fart ~

  3. The Following User Says Thank You to coothead For This Useful Post:

    marain (01-18-2022)

  4. #3
    Join Date
    Mar 2011
    Posts
    2,173
    Thanks
    61
    Thanked 121 Times in 117 Posts
    Blog Entries
    4

    Default

    Hey Marain,

    I suspect the reason it's applying to the whole page is because of this (and the other two instances that are similar) -

    Code:
    table.mentable th:nth-child(1), td:nth-child(1) {
    	width:18%;
    }
    Should probably be
    Code:
    table.mentable th:nth-child(1), table.mentable td:nth-child(1) {
    	width:18%;
    }
    However, there may be an easier way to achieve your goal. Check out the modified code below.
    The main takeaway is the use of colgroups to set the column widths.

    I also made a couple of other changes that might be helpful -

    1. Ran it through an html formatter so it's a bit easier to work with
    2. Added a missing <tr> and fixed a typo on the 10th row of the table (</ts> instead of </td>)
    3. Moved the table's inline CSS to the style block for cleanliness
    4. Combined the styles for th and td as they are the same
    5. Removed border-spacing from the table, as it only applies when border-collapse is seperate (it's set to collapse in your CSS on the example page).
    6. Combined the border styles using the border shorthand css property for conciseness


    Let me know if you have any questions.



    style
    Code:
    <style>
        table.mentable {
            border:7px solid;
            /* border-collapse: collapse; */
        }
        table.mentable th, table.mentable td {
            border: 1px solid #848482;
            margin: auto;
            text-align: center;
        }
    </style>
    table html
    HTML Code:
    <table class="mentable" title="Comparison of Criminal Record Expungements with Mental Health Record Expungements">
        <caption>Collatz Calculations<br />&nbsp;</caption>
        <colgroup>
            <col style="width:18%">
            <col style="width:50%">
            <col style="width:32%">
        </colgroup>
        <tr>
            <th>Argument</th>
            <th>Stops</th>
            <th>Explanation</th>
        </tr>
        <tr>
            <td>1</td>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>3</td>
            <td>7</td>
            <td>10  5  16  8  4  2  1</td>
        </tr>
        <tr>
            <td>4</td>
            <td>2</td>
            <td>2  1</td>
        </tr>
        <tr>
            <td>5</td>
            <td>5</td>
            <td>16 8 4 2 1</td>
        </tr>
        <tr>
            <td>6</td>
            <td>10</td>
            <td>3  10  5  16  8  4  2  1</td>
        </tr>
        <tr>
            <td>7</td>
            <td>16</td>
            <td>22  11  34  17  52  26  13  40  20  10  5  16  8  4  2  1</td>
        </tr>
        <tr>
            <td>19</td>
            <td>20</td>
            <td>58  29  88  44  22  11  34  17  52  26  13  40  20  10  5  16  8  4  2  1</td>
        </tr>
        <tr>
            <td>21</td>
            <td>7</td>
            <td>64  32  16  8  4  2  1</td>
        </tr>
        <tr>
            <td>23</td>
            <td>15</td>
            <td>70  35  106  53  160  80  40  20  10  5  16  8  4  2  1</td>
        </tr>
    </table>

  5. The Following User Says Thank You to keyboard For This Useful Post:

    marain (01-18-2022)

  6. #4
    Join Date
    Apr 2012
    Location
    Central New Jersey
    Posts
    295
    Thanks
    104
    Thanked 3 Times in 3 Posts

    Default

    Coothead and Keyboard,

    Wow! Thank you for the analysis, and the suggestions!

    A.

Similar Threads

  1. Php troubles
    By AlanAyazyam in forum PHP
    Replies: 7
    Last Post: 12-17-2009, 01:02 AM
  2. .htaccess troubles
    By mada9369 in forum PHP
    Replies: 6
    Last Post: 01-28-2009, 10:08 PM
  3. Mouseover Table Effect Troubles
    By Spookii in forum JavaScript
    Replies: 1
    Last Post: 12-11-2008, 05:44 AM
  4. CSS IE Troubles
    By MediaGrace in forum CSS
    Replies: 1
    Last Post: 12-21-2007, 03:56 PM
  5. Table Troubles.... Help?
    By QuickScriptz in forum HTML
    Replies: 0
    Last Post: 09-15-2006, 08:20 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •