ARTICLE AD BOX
I am using a firefox add-on called "Stylus" where you can inject and override the CSS rules for any given webpage and style it how you like. For my own personal use I started making my own styles for Aider CLI Docs.
Unfortunately I can't seem to finesse the table exactly how I'd like. The bottom left and right corners of the table are "glitchy" for lack of a better term.
Here is a screenshot showing exactly what I mean, pointing out the kind of "glitched" or "aliased" borders of the CSS table:
Here is the relevant CSS and HTML:
<div class="table-wrapper"><table> <thead> <tr> <th style="text-align: left">Command</th> <th style="text-align: left">Description</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><strong>/add</strong></td> <td style="text-align: left">Add files to the chat so aider can edit them or review them in detail</td> </tr> <tr> <td style="text-align: left"><strong>/architect</strong></td> <td style="text-align: left">Enter architect/editor mode using 2 different models. If no prompt provided, switches to architect/editor mode.</td> </tr> <tr> <td style="text-align: left"><strong>/ask</strong></td> <td style="text-align: left">Ask questions about the code base without editing any files. If no prompt provided, switches to ask mode.</td> </tr> <tr> <td style="text-align: left"><strong>/chat-mode</strong></td> <td style="text-align: left">Switch to a new chat mode</td> </tr> <tr> <td style="text-align: left"><strong>/clear</strong></td> <td style="text-align: left">Clear the chat history</td> </tr> <tr> <td style="text-align: left"><strong>/code</strong></td> <td style="text-align: left">Ask for changes to your code. If no prompt provided, switches to code mode.</td> </tr> <tr> <td style="text-align: left"><strong>/commit</strong></td> <td style="text-align: left">Commit edits to the repo made outside the chat (commit message optional)</td> </tr> <tr> <td style="text-align: left"><strong>/context</strong></td> <td style="text-align: left">Enter context mode to see surrounding code context. If no prompt provided, switches to context mode.</td> </tr> <tr> <td style="text-align: left"><strong>/copy</strong></td> <td style="text-align: left">Copy the last assistant message to the clipboard</td> </tr> <tr> <td style="text-align: left"><strong>/copy-context</strong></td> <td style="text-align: left">Copy the current chat context as markdown, suitable to paste into a web UI</td> </tr> <tr> <td style="text-align: left"><strong>/diff</strong></td> <td style="text-align: left">Display the diff of changes since the last message</td> </tr> <tr> <td style="text-align: left"><strong>/drop</strong></td> <td style="text-align: left">Remove files from the chat session to free up context space</td> </tr> <tr> <td style="text-align: left"><strong>/edit</strong></td> <td style="text-align: left">Alias for /editor: Open an editor to write a prompt</td> </tr> <tr> <td style="text-align: left"><strong>/editor</strong></td> <td style="text-align: left">Open an editor to write a prompt</td> </tr> <tr> <td style="text-align: left"><strong>/editor-model</strong></td> <td style="text-align: left">Switch the Editor Model to a new LLM</td> </tr> <tr> <td style="text-align: left"><strong>/exit</strong></td> <td style="text-align: left">Exit the application</td> </tr> <tr> <td style="text-align: left"><strong>/git</strong></td> <td style="text-align: left">Run a git command (output excluded from chat)</td> </tr> <tr> <td style="text-align: left"><strong>/help</strong></td> <td style="text-align: left">Ask questions about aider</td> </tr> <tr> <td style="text-align: left"><strong>/lint</strong></td> <td style="text-align: left">Lint and fix in-chat files or all dirty files if none in chat</td> </tr> <tr> <td style="text-align: left"><strong>/load</strong></td> <td style="text-align: left">Load and execute commands from a file</td> </tr> <tr> <td style="text-align: left"><strong>/ls</strong></td> <td style="text-align: left">List all known files and indicate which are included in the chat session</td> </tr> <tr> <td style="text-align: left"><strong>/map</strong></td> <td style="text-align: left">Print out the current repository map</td> </tr> <tr> <td style="text-align: left"><strong>/map-refresh</strong></td> <td style="text-align: left">Force a refresh of the repository map</td> </tr> <tr> <td style="text-align: left"><strong>/model</strong></td> <td style="text-align: left">Switch the Main Model to a new LLM</td> </tr> <tr> <td style="text-align: left"><strong>/models</strong></td> <td style="text-align: left">Search the list of available models</td> </tr> <tr> <td style="text-align: left"><strong>/multiline-mode</strong></td> <td style="text-align: left">Toggle multiline mode (swaps behavior of Enter and Meta+Enter)</td> </tr> <tr> <td style="text-align: left"><strong>/paste</strong></td> <td style="text-align: left">Paste image/text from the clipboard into the chat. Optionally provide a name for the image.</td> </tr> <tr> <td style="text-align: left"><strong>/quit</strong></td> <td style="text-align: left">Exit the application</td> </tr> <tr> <td style="text-align: left"><strong>/read-only</strong></td> <td style="text-align: left">Add files to the chat that are for reference only, or turn added files to read-only</td> </tr> <tr> <td style="text-align: left"><strong>/reasoning-effort</strong></td> <td style="text-align: left">Set the reasoning effort level (values: number or low/medium/high depending on model)</td> </tr> <tr> <td style="text-align: left"><strong>/report</strong></td> <td style="text-align: left">Report a problem by opening a GitHub Issue</td> </tr> <tr> <td style="text-align: left"><strong>/reset</strong></td> <td style="text-align: left">Drop all files and clear the chat history</td> </tr> <tr> <td style="text-align: left"><strong>/run</strong></td> <td style="text-align: left">Run a shell command and optionally add the output to the chat (alias: !)</td> </tr> <tr> <td style="text-align: left"><strong>/save</strong></td> <td style="text-align: left">Save commands to a file that can reconstruct the current chat session’s files</td> </tr> <tr> <td style="text-align: left"><strong>/settings</strong></td> <td style="text-align: left">Print out the current settings</td> </tr> <tr> <td style="text-align: left"><strong>/test</strong></td> <td style="text-align: left">Run a shell command and add the output to the chat on non-zero exit code</td> </tr> <tr> <td style="text-align: left"><strong>/think-tokens</strong></td> <td style="text-align: left">Set the thinking token budget, eg: 8096, 8k, 10.5k, 0.5M, or 0 to disable.</td> </tr> <tr> <td style="text-align: left"><strong>/tokens</strong></td> <td style="text-align: left">Report on the number of tokens used by the current chat context</td> </tr> <tr> <td style="text-align: left"><strong>/undo</strong></td> <td style="text-align: left">Undo the last git commit if it was done by aider</td> </tr> <tr> <td style="text-align: left"><strong>/voice</strong></td> <td style="text-align: left">Record and transcribe voice input</td> </tr> <tr> <td style="text-align: left"><strong>/weak-model</strong></td> <td style="text-align: left">Switch the Weak Model to a new LLM</td> </tr> <tr> <td style="text-align: left"><strong>/web</strong></td> <td style="text-align: left">Scrape a webpage, convert to markdown and send in a message</td> </tr> </tbody> </table></div>Here is my CSS:
/* TABLE STYLES ///////////////////////////////////////////////////////*/ .table-wrapper { position: initial; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; box-shadow: none !important; margin-top: 28px !important; margin-bottom: 28px !important; background-color: transparent !important; display: block !important; border-radius: 8px !important; /* border-inline: 1px solid #b5b8bf !important; */ border-top: 1px solid #b3b5ba !important; /* border: 0px solid #6bff5d !important; */ table { border-collapse: collapse; box-sizing: border-box !important; line-height: 1.4rem !important; border-radius: 10px !important; thead { box-sizing: border-box !important; color: #494c54; font-size: 18px !important; tr { border-radius: 8px !important; } tr th { box-sizing: border-box !important; border-collapse: collapse !important; background-color: #e1e2e5d4; height: 1.5rem !important; border-right: 1px solid #c0c0c0 !important; border-bottom: 1px solid #d1d1d1 !important; &:last-of-type { border-right: none !important; } } } tbody { tr td { box-sizing: border-box !important; border-bottom: 1px solid #a8abb0 !important; border-right: 1px solid #a8abb087 !important; } tr:last-of-type td { border-bottom: 1px solid #a8abb0 !important; } } } } @media (min-width: 31.25rem) { tr, td { font-size: .875rem !important; } th { font-size: .961rem !important; font-family: "Helvetica Now Text" !important; } } I've tried using border-inline instead of just setting border I've tried different display types. I've tried setting display for the table headers to table-header-group. I've tried removing and swapping border radius values for both the wrapper and the table inside the wrapperI have a sneaking feeling that the issue is stemming from styles applied to the wrapper as well as the table itself, somehow causing overlapping borders. But I can't get it to work.
Can someone clearly explain to me why this is happening and how to fix it? I would greatly appreciate some help.
![iframe display automatically responsive on mobile and tablet [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded)