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

Next.js
1

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.

2

You need to let people see your code

3

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

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

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.

4

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.