Table Troubles

**marain** · 01-17-2022, 10:07 PM

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.)

**coothead** · 01-18-2022, 01:02 AM

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

**keyboard** · 01-18-2022, 01:55 AM

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 -

Ran it through an html formatter so it's a bit easier to work with
Added a missing <tr> and fixed a typo on the 10th row of the table (</ts> instead of </td>)
Moved the table's inline CSS to the style block for cleanliness
Combined the styles for th and td as they are the same
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).
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>