Skip to content

style(docs): improve table readability #2129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

style(docs): improve table readability #2129

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 22 additions & 4 deletions djangoproject/scss/_style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2523,10 +2523,28 @@ table.foundation td {
padding: 0 5px;
}

table.docutils td,
table.docutils th {
border-bottom: 1px solid var(--hairline-color);
}
table.docutils {
border-collapse: collapse;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

border-collapse: collapse is already the default for this element, I don't think we need to repeat it.

margin-bottom: 10.5em;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That margin is way too big, did you mean 1.5em?

box-shadow: 0 1px 3px rgba(0,0,0,0.1);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you make the spacing with the rgba call consistent with the rest of the file?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the rationale behind adding a box-shadow here? Unless I'm mistaken there are no other elements in the documentation that use a box shadow, right?

}
table.docutils td, table.docutils th {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you fix the indentation on these rules?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you use nesting to avoid having to repeat table.docutils?

table.docutils {
    /* rules for <table> */
    td, th {
        /* rules for cells */
    }
    ...
}

border-bottom: 1px solid #ccc;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use a theme color (see _utils.scss in the same folder) instead of hardcoding #ccc?

Suggested change
border-bottom: 1px solid #ccc;
border-bottom: 1px solid $gray-medium;

padding: 8px 12px;
line-height: 1.4;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the purpose of this rule? Disabling it doesn't seem to have much visual effect (it seems to reduce the height of the cell by ~1px). Is it related to the padding you added? If so, what's the relationship between the two values?

}
table.docutils thead th {
background-color: var(--code-bg);
border-bottom: 2px solid #999;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use a theme color here too, maybe $gray-dark?

font-weight: bold;
}
table.docutils tr:nth-child(even) {
background-color: var(--code-bg);
}
table.docutils tr:hover {
background-color: var(--selection);
}

Copy link
Member

@adamzap adamzap Aug 6, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you remove the extra blank line here? It looks like sections in this file are separated by a single blank line, not two.


.list-links {
//Can be used globally to stack list items either with a <ul>, or with a <dl> using the <dd> to add meta information. (See Community Page - sidebar and block body.)
Expand Down