How can I apply a border only inside a table?

html

responsive-design

css-selectors

accessibility

byNikita Barsukov·Aug 9, 2024

Implement an inner border for your table by using the border property on the table cells, while strategically excluding the outermost ones. This can be done by setting border-collapse: collapse; on your table and excluding the first and last cells with :not(:first-child):not(:last-child) as well as the first and last rows. Below is an example of how to implement this with CSS:

table {border-collapse: collapse;}  /*Who needs space? Not your table cells!*/
td, th { padding: 8px; border: 1px solid transparent; } /*Your secret border agent, invisible and effective.*/
tr:not(:first-child):not(:last-child) td,
tr td:not(:first-child):not(:last-child),
tr:first-child td:not(:first-child):not(:last-child),
tr:last-child td:not(:first-child):not(:last-child) {
    border-color: #000; /*The secret agent code revealed... It's #000. Spooky!*/
}

This will produce a matrix-like rendering of table cells where the borders are shared between the cells, excluding the table's outer perimeter.

Mastering Border Conflicts

When borders are battling for dominance, the border-style: hidden; comes to the rescue. According to W3C, this style neatly conceals conflicting borders. If you prefer a simplified approach, use the HTML attributes frame="void" and rules="all". An example is provided below:

table  { border-collapse: collapse; frame: void; rules: all; }
td, th { border: 1px solid black; } /*One ring to rule them all, or in this case, one border.*/

This approach gives you the power of the CSS and HTML ring to make sense out of table border chaos.

Battle Against Browser Inconsistencies

Web browsers are like rebellious teenagers sometimes — they don't always follow the standard rules. Older versions like IE7 or IE8 lack support for advanced CSS pseudo-classes. However, there's no need for despair. We can use different tools to keep them in line:

Apply td + td, th + th { border-left: 1px solid; } for cell separation in modern browsers.
Use tr + tr { border-top: 1px solid; } to create horizontal inner borders.
Consider falling back for IE7 by utilizing tr + tr > td, tr + tr > th.

And of course, always test across different browsers. Good practice for top-notch developers... and patience!

Ensuring Responsive Design

Ever heard of the transformers? Tablets and phones are the new transformers, changing size at will. Make sure your table is prepared for that transformation. Use media queries to adjust the table fit or change your table shape for smaller screens. Because, let's be honest, no one likes scrolling sideways!

Visualisation Imagine a social event:

Participants: 💁💁‍♂️ 🚶 💁💁‍♂️ 🚶 💁💁‍♂️

Apply social distancing regulations — it's just like how borders work:

Distanced Participants: 💁🔲💁‍♂️🔲 🚶 💁🔲💁‍♂️🔲 🚶 💁🔲💁‍♂️
# Each 🔲 represents a border INSIDE

Note: Always respect recommended social distancing guidelines. :)

Making Tables Accessible

We all know that tables are for everyone, right? So, make sure yours is legible for all users, including those using screen readers. Utilize scope="col" or scope="row" to improve headers, and always use high-contrast colors for text and borders. Because remember, not all bats see like Batman!

Keeping your CSS Selectors Efficient

For speeding up your webpage performance, remember that your CSS selectors should be like a Sunday drive, not like weaving through traffic on a Monday morning. Keep them simple and straightforward.

Why not share your fabulous table designs with your colleagues and clients? But remember, a good magician never reveals their secrets unless someone asks. Provide live examples, demos, and link to authoritative sources like W3C or MSDN for more in-depth explanations.

explain-codes / Html / How can I apply a border only inside a table?

Linked

Set cellpadding and cellspacing in CSS?



Space between two rows in a table?



Setting table row height



How to prevent text in a table cell from wrapping



Css nth-child for greater than and less than

