github页面jekyll-可以从主题覆盖CSS
只是为了序言,我对前端很糟糕,我正在学习Ruby/Jekyll。
我在GitHub页面网站上工作,我正在尝试覆盖我使用的Jekyll主题的某些CSS类。
我已经创建了一个带有自定义CSS类的表,我要做的就是摆脱该桌子上的边框。
.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>
该表通过此表很好地生成,边框没有显示。但是它包含在&lt; main ID =“ content” class =“ main-content”角色=“ main”&gt;
标签中,将CSS规则从jekyll的主题中带入其中。
我已经尝试过!html中重要的,内联CSS,样式标签。我尝试过的任何事情都无法摆脱这个边界。
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论