Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025