Hi,
I’m attempting to create a 3x6 table in the Custom Liquid section. My goal is to have the top, bottom, left, and right border of the table transparent.
The issue I’m running into is when I preview / save the code and view the table on my website, the table still shows an outlined border.
Here’s my code:
What Makes PureForm Labs Different /* Container styles */ .container { width: 80%; margin: 0 auto; text-align: center; }/* Header styles */
h2 {
text-align: center;
width: 100%;
font-weight: bold;
}
/* Coloring “Labs” */
h2 span {
color: #00a9df;
}
/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
border: none;
}
td, th {
padding: 8px;
text-align: left;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: none;
border-right: none;
}
/* Centering content for columns 2 and 3 */
td:nth-child(2),
td:nth-child(3) {
text-align: center;
}
/* Coloring column 2 */
td:nth-child(2) {
background-color: #4ccbf4;
}
/* Bold column one content */
td:nth-child(1) {
font-weight: bold;
}
/* Bold content for Column 2 and 3, line 1 */
tr:first-child td:nth-child(2),
tr:first-child td:nth-child(3) {
font-weight: bold;
}
/* Transparent top border for the first row */
tr:first-child td {
border-top: transparent;
}
/* Transparent bottom border for the sixth row */
tr:last-child td {
border-bottom: transparent;
}
/* Table column widths */
colgroup {
col:first-child {
width: 50%;
}
col:nth-child(2),
col:nth-child(3) {
width: 25%;
}
}
What Makes PureForm Labs Different
| Content 1 | Content 2 | Content 3 |
| Content 1 | Content 2 | Content 3 |
| Content 1 | Content 2 | Content 3 |
| Content 1 | Content 2 | Content 3 |
| Content 1 | Content 2 | Content 3 |
| Content 1 | Content 2 | Content 3 |
Here’s an image of what I’m trying to mimic in HTML with CSS.
Any help would be appreciated.