A Table With Borders Only On The Inside

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


You know, like a tic-tac-toe board. I was just pondering how to do this the other day, as one does. There are three ways I can think of. One involves a good handful of rules and is the way I intuitively think of, one involves a deprecated attribute, and one is very simple and feels kinda like a CSS trick.

Possibility #1) Removing the Borders You Don’t Need
This is the first way I think of. Add a border everywhere, then remove the border on the:

The top of every cell in the first row
The bottom of every cell in the last row
The left of the first cell in every row
The right of last cell in every row

table {
border-collapse: collapse;
}
table td {
border: 5px solid black;
}
table tr:first-child td {
border-top: 0;
}
table tr td:first-child {
border-left: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:last-child {
border-right: 0;
}
See the Pen Inside Border on Table #1 by Chris Coyier (@chriscoyier) on CodePen.
Possibility #2) The `rules` Attribute
This is not recommended as it’s a deprecated attribute. But, that’s what rules was specifically for.
See the Pen Inside Border on Table #1 by Chris Coyier (@chriscoyier) on CodePen.
You can control the color with border-color, but not border-width or border-style.
Possibility #3) Using `border-style: hidden;`
This is the one that feels like a CSS trick to me.
table {
border-collapse: collapse;
border-style: hidden;
}
table td {
border: 5px solid black;
}
MDN has an explanation:
In case of table cell and border collapsing, the hidden value has the highest priority: it means that if any other conflicting border is set, it won’t be displayed.
By putting border-style: hidden; on the table itself, it means that “hidden” wins on that outside edge, but only the outside edge, not any of the other borders on the inside cells.
See the Pen Inside Border on Table #3 by Chris Coyier (@chriscoyier) on CodePen.

Can you think of other ways?

A Table With Borders Only On The Inside is a post from CSS-Tricks
Source: CssTricks

Posted on January 21, 2017 in css, Drupal Developer, drupal developer austin, Drupal Development, Expert Drupal Development, The, Web Design Services

Share the Story

Back to Top