Just to preface I'm terrible with front-end and I'm learning Ruby/Jekyll.
I'm working on a GitHub pages site, and I'm attempting to overwrite some css class that is inherited from the Jekyll theme that I'm using.
I've created a table with a custom css class, and all I'm trying to do is get rid of the border on this table.
.portfolio-table td {
font-size: 14px;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}
.portfolio-table th {
font-size: 14px;
font-weight: normal;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}
.portfolio-table .portfolio-table-text-header {
font-weight: bold;
text-align: left;
vertical-align: top;
}
.portfolio-table .portfolio-table-text-body {
color: #9b9b9b;
text-align: left;
vertical-align: top;
}
.portfolio-table .portfolio-table-header,
.portfolio-table .portfolio-table-image,
.portfolio-table .portfolio-table-button {
text-align: left;
vertical-align: top;
}<table class="portfolio-table" style="border: 0px transparent #ffffff;">
<tbody>
<tr>
<td class="portfolio-table-image"><img
src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M157.52 272h36.96L176 218.78 157.52 272zM352 256c-13.23 0-24 10.77-24 24s10.77 24 24 24 24-10.77 24-24-10.77-24-24-24zM464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM250.58 352h-16.94c-6.81 0-12.88-4.32-15.12-10.75L211.15 320h-70.29l-7.38 21.25A16 16 0 0 1 118.36 352h-16.94c-11.01 0-18.73-10.85-15.12-21.25L140 176.12A23.995 23.995 0 0 1 162.67 160h26.66A23.99 23.99 0 0 1 212 176.13l53.69 154.62c3.61 10.4-4.11 21.25-15.11 21.25zM424 336c0 8.84-7.16 16-16 16h-16c-4.85 0-9.04-2.27-11.98-5.68-8.62 3.66-18.09 5.68-28.02 5.68-39.7 0-72-32.3-72-72s32.3-72 72-72c8.46 0 16.46 1.73 24 4.42V176c0-8.84 7.16-16 16-16h16c8.84 0 16 7.16 16 16v160z'/%3e%3c/svg%3e"
alt="Image" width="100" height="100"></td>
<td class="portfolio-table-image"><img
src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M157.52 272h36.96L176 218.78 157.52 272zM352 256c-13.23 0-24 10.77-24 24s10.77 24 24 24 24-10.77 24-24-10.77-24-24-24zM464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM250.58 352h-16.94c-6.81 0-12.88-4.32-15.12-10.75L211.15 320h-70.29l-7.38 21.25A16 16 0 0 1 118.36 352h-16.94c-11.01 0-18.73-10.85-15.12-21.25L140 176.12A23.995 23.995 0 0 1 162.67 160h26.66A23.99 23.99 0 0 1 212 176.13l53.69 154.62c3.61 10.4-4.11 21.25-15.11 21.25zM424 336c0 8.84-7.16 16-16 16h-16c-4.85 0-9.04-2.27-11.98-5.68-8.62 3.66-18.09 5.68-28.02 5.68-39.7 0-72-32.3-72-72s32.3-72 72-72c8.46 0 16.46 1.73 24 4.42V176c0-8.84 7.16-16 16-16h16c8.84 0 16 7.16 16 16v160z'/%3e%3c/svg%3e"
alt="Image" width="100" height="100"></td>
</tr>
<tr>
<td class="portfolio-table-text-header">LEAN STARTUP PRODUCT DEVELOPMENT</td>
<td class="portfolio-table-text-header">IMPLEMENTING AGILE - KANBAN & SCRUM</td>
</tr>
<tr>
<td class="portfolio-table-text-body">Lunna is an app that provides assistance on women's
health. The app learns about user choices, preferences, and symptoms using machine learning;
allowing the user to improve life quality. Developed an MVP (minimum viable product) and
ready to scale version of the app in React Native and Elixir. Ran 2+ workshops during design
and also development phases</td>
<td class="portfolio-table-text-body">SoFi is an online personal finance company. I managed the
projects with a team of 30+ people. Including designers, copywriters, product marketing
managers and sales teams ofdifferent areas. Delivered 94 projects within a month including
billboards, social media campaigns,TV and YouTube commercials, eCRM campaigns, and events
for different marketing campaigns.</td>
</tr>
<tr>
<td class="portfolio-table-button">BUTTON</td>
<td class="portfolio-table-button">BUTTON</td>
</tr>
</tbody>
</table>This table generates nicely through this, where the border does not show up. But it is contained in a <main id="content" class="main-content" role="main"> tag that is bringing css rules into it from Jekyll's theme.
I have tried !important, inline css, style tags in the HTMl. Nothing I have tried can get rid of this border.