Table formatting question

[Nathan-tortoise]

I am putting the online hunt Burn After Solving, which uses a fork of the gph-site codebase. I've added some additional styling to base.css, but I am confused about some of the resulting behavior around tables. When I try to set a fixed width for a table cell or column, the first and last cell in each row appear truncated. Table borders do not always appear in the intended manner as well. I have tested out the my CSS on a static html file before I uploaded it to our codebase, and it appeared as intended, but then got changed when it was served through the test site. I have looked over the existing code in base.css and I haven't worked out what might be causing this unexpected behavior. Do you know what is at issue here? I am including a couple screenshots of this behavior.

[cesium12]

Hi Nathan, that behavior looks like it's coming from here (although if it's only appearing when you set a fixed width, then I'm not sure why that's happening). If the border issues are on the last row of the table, then it may be this. normalize.css and skeleton.css are two libraries we use to provide a consistent starting point for styling (predating my time on GPH, so I couldn't comment on why they were chosen), but we often override them when we need to, either in base.css or individual templates. In particular I think these table styles are intended for textual tables without vertical borders, and if you're making an actual grid as for a crossword or logic puzzle, you'll definitely need to override them. If you're not already familiar with them, browsers' developer consoles are great tools for seeing which CSS rules apply to a given element and what happens when you toggle them off. Hope that helps, and feel free to reply if it didn't.

[Nathan-tortoise]

Thanks, that helps a lot! Yeah, a lot of this is for crossword grids and other tables where borders are important, and it does look like the biggest thing for me to do is to overrule lots of settings.

Thanks, -Nathan, Burn After Solving

On Tue, Sep 7, 2021 at 4:37 PM Alan Huang @.***> wrote:

Hi Nathan, that behavior looks like it's coming from here https://github.com/galacticpuzzlehunt/gph-site/blob/master/puzzles/static/css/skeleton.css#L320 (although if it's only appearing when you set a fixed width, then I'm not sure why that's happening). If the border issues are on the last row of the table, then it may be this https://github.com/galacticpuzzlehunt/gph-site/blob/master/puzzles/static/css/base.css#L94. normalize.css and skeleton.css are two libraries we use to provide a consistent starting point for styling (predating my time on GPH, so I couldn't comment on why they were chosen), but we often override them when we need to, either in base.css or individual templates. In particular I think these table styles are intended for textual tables without vertical borders, and if you're making an actual grid as for a crossword or logic puzzle, you'll definitely need to override them. If you're not already familiar with them, browsers' developer consoles are great tools for seeing which CSS rules apply to a given element and what happens when you toggle them off. Hope that helps, and feel free to reply if it didn't.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/galacticpuzzlehunt/gph-site/issues/15#issuecomment-914613896, or unsubscribe https://github.com/notifications/unsubscribe-auth/AT3G5L75DT2LE5OQSE52WOLUAZZYHANCNFSM5DTDZ4EQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.