Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 53

Why do I have to specify “width: 100vh” with min-width and max-width already specified equal? Actually, if I remove “width: 100vh”, the table changes. Why does that happen?

tbody td {
  width: 100vw;
  min-width: 4rem;
  max-width: 4rem;
}

This is what is intended to add.

tbody td {
  min-width: 4rem;
  max-width: 4rem;
}

This doesn’t work.

Hi,

min-width & max-width need a value to work with, they are > and < calculations.
No width defined, nothing to calculate.

Thanks for your reply, but I still don’t understand completely. The width is set as ‘auto’ by default, right? If I set width: auto explicitly, the page shows the same as without width defined.

tbody td {
  min-width: 4rem;
  max-width: 4rem;
}

works the same as

tbody td {
  width: auto;
  min-width: 4rem;
  max-width: 4rem;
}

If I set width to an arbitary value, such as 5px, 2em, 10%, it works normally.

So maybe the problem is what does it mean by one property is defined?

And I also made a test.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
  </body>
</html>
#p1 {
  width : 100vw;
  min-width: 10rem;
  max-width: 10rem;
  background-color: blue;
}
#p2 {
  min-width: 10rem;
  max-width: 10rem;
  background-color: red;
}

If you open in browser, you can see that the two elements have the same width. I am confused by the appearance differences between the new example and the original project. And I also try to get some clues from here but don’t figure it out.

You are right, I forgot about default auto (facepalm), but I can understand your confusion now.

The editor you see in the lessons is a virtual one, there is JavaScript/ React working under the surface and checking your inputs.

If you copy the code into an editor like VSCode, the table won’t change when you remove the width of 100vw, like in your test, as it should.

I assume that you need to set the value to 100vw in the lesson for educational purposes, to get familiar with CSS and remember that this confused other students in the past.

I run the lesson code in Chrome and use developer tools. The ‘width’ really matter just the same way as in the virtual one :thinking:

Maybe you can take a test of the following code in Chrome or other browsers?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <main>
      <table>
        <tbody>
          <tr class="data">
            <th>Header</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>   
    </main>
  </body>
</html>
table {
  width: 100%;
}

tbody td {
  width: 100vw;
  min-width: 4rem;
  max-width: 4rem;
}

The ‘width: 100vw’ specification really matters, but I still don’t understand it.

Alright, the problem is probably that min-width and max-width are undefined for table cells.

If I change the table into div, it works normally.

This link also helps.

Thank you for your help anyway :smiley:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <link rel="stylesheet" href="./styles-2.css">
  </head>
  <body>
    <main>
      <div class="table">
        <tr>
          <th>Header</th>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      <div class="table">   
    </main>
  </body>
</html>
.table {
  width: 100%;
}

td {
  width: 100vw;
  min-width: 4rem;
  max-width: 4rem;
}

Well, though my question has been solved, I think the lesson should be modified. If fixed width of table cell is required, maybe we can try this way but not using undefined properties.

How to let the organizer see it?

And what about setting the width: 100% for the td element? I was not supposed to behave the sameway that defining it to 100vw? Why max-width seems to not have any effect in this case?

Yes, it behaves in another way. As the link I post before, it seems that min-width and max-width are undefined for table cells, so we cannot expect its normal behavior with min-max-width.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.