CODEWITHSUNDEEP
htmlcss
raduken
raduken

Reputation: 2119

Tables Adjust Row width for th and td

I have a table and the <th> and <td> suppose be the same width, what I am doing wrong in my sass and css? the nth-child(1) and nth-child(2) suppose to have 20% and nth-child(3) 60% , what I am doing wrong? thank you.

sass code:

 table {
      th,td:nth-child(1),
      th,td:nth-child(2) {
        width: 20%;
      }
      th,td:nth-child(3) {
        width: 60%;
      }

      tr {
        width: 100%;
        table-layout: fixed;
        display: inline-table;
      }
  }


table th, table td:nth-child(1),
table th, table td:nth-child(2) {
  width: 20%;
}
table th, table td:nth-child(3) {
  width: 60%;
}
<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 133

Answers (5)

Lekhraj
Lekhraj

Reputation: 521

 table th,td:nth-child(1),table th,td:nth-child(2) {
 width: 20%;
 text-align:center;}

 table th:nth-child(3),table td:nth-child(3) {
 width: 60%;
 text-align:center;}

 table {
    width: 100%; }

Upvotes: 0

Matthias Seifert
Matthias Seifert

Reputation: 2073

You have a little "Bug" in your CSS logic. Your styles apply to every th inside of table, and only to the nth-child of the td Elements. So your th tags getting a width of 60%, because this is the last style and overwrites the ones before. To solve this, you could add the nth-child to the th Tags too, or remove the th completely, since they get the width of the td Elements below, when there is no specific width elsewhere. (Hope I could describe it, otherwise just ask :-) )

table { width: 100%; }

table td:nth-child(1),
table td:nth-child(2) {
  width: 20%;
}
table td:nth-child(3) {
  width: 60%;
}
<table border="1">
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

To be clear: Defining both th and td is pretty redundand, you could also just apply the styles to the th Tag, which will also work.

table th:nth-child(1),
table th:nth-child(2) {
  width: 20%;
}
table th:nth-child(3) {
  width: 60%;
}

Upvotes: 1

Manish Patel
Manish Patel

Reputation: 3674

Added width in th instead of td

table th:nth-child(1),
table th:nth-child(2){
  width: 20%;
}
table th:nth-child(3) {
  width: 60%;  
}
table {
  width:100%;
}
table th {
  background: #f5f5f5;
}
table td {
  background: #eaeaea;
}
<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Raphael Cunha
Raphael Cunha

Reputation: 1114

The way you have your CSS set up now is to only apply the :nth-child() rules to the tds. In order to apply it for the ths you need to add the same rule to it.

table{
  width: 100%;
}
table th:nth-child(1), table td:nth-child(1),
table th:nth-child(2), table td:nth-child(2) {
  width: 20%;
}
table th:nth-child(3), table td:nth-child(3) {
  width: 60%;
}

table th {
  background-color: #f5f5f5;
}

table td {
  background-color: #999;
 }
<body>
  <table>
    <thead>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</body>

Upvotes: 1

Awsme Sandy
Awsme Sandy

Reputation: 1408

Here is the simple solution:

Set table width to 100%

table {
  width: 100%;
  text-align: center;
}

th {
  width: 20%;
}

th:nth-child(3) {
  width: 60%;
}

Thats all

Upvotes: 1

Related Questions