Could someone please explain why the "md:table-cell" class name is not having the expected effect in this context?

I’ve attempted various approaches to resolve this problem. What’s particularly puzzling is that the “md:hidden” class is functioning as expected to display the {issue.status} cell on mobile devices under the 'title’cell. In contrast, the other cells (status and CreatedAt) remain hidden, and the “md:table-cell” class does not seem to be working as intended. Your assistance in understanding this matter would be greatly appreciated.

You need to let people see your code

I’m having the same problem. This is my code:

<Table.Root variant='surface'>
                        <Table.ColumnHeaderCell className='hidden md:table-cell'>Status</Table.ColumnHeaderCell>
                        <Table.ColumnHeaderCell className='hidden md:table-cell'>Created</Table.ColumnHeaderCell>
                    { => (
                        <Table.Row key={}>
                                <div className='block md:hidden'>{issue.status}</div>
                            <Table.Cell className='hidden md:table-cell'>{issue.status}</Table.Cell>
                            <Table.Cell className='hidden md:table-cell'>{issue.createdAt.toDateString()}</Table.Cell>

It’s the same code as in Mosh’s video as far as I can tell. It hides the status and date columns at every size.

For the mobile status one (block md:hidden) it shows it as block at every size. Basically the first attribute is applied, and it never applies what comes after the md:.

Any ideas? I’m sure it’s something obvious that I’m missing.

Nah, you know what, I am an idiot. I didn’t actually have my window quite big enough (I’m scrunching things down so I can see multiple things at once). I feel very stupid but I guess I’ll leave it up in case it helps anyone. Lol! Told you it was something obvious. Sigh.