Я не могу сгладить закругленные нижние углы HTML-таблицы с помощью CSS. ⇐ Html

[Anonymous]

Я использую надстройку Firefox под названием «Стилус», с помощью которой вы можете внедрять и переопределять правила CSS для любой веб-страницы и стилизовать ее по своему усмотрению. Для личного использования я начал создавать свои собственные стили для документации Aider CLI.
К сожалению, я не могу доработать таблицу так, как мне хотелось бы. Нижний левый и правый углы таблицы "сбои" из-за отсутствия лучшего термина.
Вот скриншот, показывающий именно то, что я имею в виду, указывающий на "сбойные" или "совмещенные" границы таблицы CSS:



Вот соответствующие CSS и HTML:

Код: Выделить всё

/* 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;
}
}

Код: Выделить всё

Command
Description




[b]/add[/b]
Add files to the chat so aider can edit them or review them in detail


[b]/architect[/b]
Enter architect/editor mode using 2 different models. If no prompt provided, switches to architect/editor mode.


[b]/ask[/b]
Ask questions about the code base without editing any files. If no prompt provided, switches to ask mode.


[b]/chat-mode[/b]
Switch to a new chat mode


[b]/clear[/b]
Clear the chat history


[b]/code[/b]
Ask for changes to your code.  If no prompt provided, switches to code mode.


[b]/commit[/b]
Commit edits to the repo made outside the chat (commit message optional)


[b]/context[/b]
Enter context mode to see surrounding code context.  If no prompt provided, switches to context mode.


[b]/copy[/b]
Copy the last assistant message to the clipboard


[b]/copy-context[/b]
Copy the current chat context as markdown, suitable to paste into a web UI


[b]/diff[/b]
Display the diff of changes since the last message


[b]/drop[/b]
Remove files from the chat session to free up context space


[b]/edit[/b]
Alias for /editor: Open an editor to write a prompt


[b]/editor[/b]
Open an editor to write a prompt


[b]/editor-model[/b]
Switch the Editor Model to a new LLM


[b]/exit[/b]
Exit the application


[b]/git[/b]
Run a git command (output excluded from chat)


[b]/help[/b]
Ask questions about aider


[b]/lint[/b]
Lint and fix in-chat files or all dirty files if none in chat


[b]/load[/b]
Load and execute commands from a file


[b]/ls[/b]
List all known files and indicate which are included in the chat session


[b]/map[/b]
Print out the current repository map


[b]/map-refresh[/b]
Force a refresh of the repository map


[b]/model[/b]
Switch the Main Model to a new LLM


[b]/models[/b]
Search the list of available models


[b]/multiline-mode[/b]
Toggle multiline mode (swaps behavior of Enter and Meta+Enter)


[b]/paste[/b]
Paste image/text from the clipboard into the chat.  Optionally provide a name for the image.


[b]/quit[/b]
Exit the application


[b]/read-only[/b]
Add files to the chat that are for reference only, or turn added files to read-only


[b]/reasoning-effort[/b]
Set the reasoning effort level (values: number or low/medium/high depending on model)


[b]/report[/b]
Report a problem by opening a GitHub Issue


[b]/reset[/b]
Drop all files and clear the chat history


[b]/run[/b]
Run a shell command and optionally add the output to the chat (alias: !)


[b]/save[/b]
Save commands to a file that can reconstruct the current chat session’s files


[b]/settings[/b]
Print out the current settings


[b]/test[/b]
Run a shell command and add the output to the chat on non-zero exit code


[b]/think-tokens[/b]
Set the thinking token budget, eg: 8096, 8k, 10.5k, 0.5M, or 0 to disable.


[b]/tokens[/b]
Report on the number of tokens used by the current chat context


[b]/undo[/b]
Undo the last git commit if it was done by aider


[b]/voice[/b]
Record and transcribe voice input


[b]/weak-model[/b]
Switch the Weak Model to a new LLM


[b]/web[/b]
Scrape a webpage, convert to markdown and send in a message

• Я пробовал использовать border-inline вместо простой установки границы
• Я пробовал разные типы отображения.
• Я пробовал настроить отображение для заголовков таблиц в table-header-group.
• Я пробовал удалить и замена значений радиуса границы как для оболочки, так и для таблицы внутри оболочки

У меня есть подозрение, что проблема связана со стилями, примененными к оболочке, а также к самой таблице, что каким-то образом вызывает перекрытие границ. Но я не могу заставить его работать.
Может ли кто-нибудь внятно объяснить мне, почему это происходит и как это исправить? Буду очень признателен за помощь.

Подробнее здесь: https://stackoverflow.com/questions/798 ... e-with-css