Technical Q&A

PureForm-Labs · ‎09-20-2023

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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>What Makes PureForm Labs Different</title>
<style>
/* 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%;
}
}
</style>
</head>
<body>
<h2>What Makes PureForm <span>Labs</span> Different</h2>
<div class="container">
<table>
<colgroup>
<col style="width: 50%;">
<col style="width: 25%;">
<col style="width: 25%;">
</colgroup>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</table>
</div>
</body>
</html>

Here's an image of what I'm trying to mimic in HTML with CSS.

Any help would be appreciated.

Technical Q&A

Issue With HTML/CSS In Custom Liquid Section

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links