github页面jekyll-可以从主题覆盖CSS

发布于 2025-02-06 15:18:49 字数 4975 浏览 2 评论 0原文

只是为了序言,我对前端很糟糕,我正在学习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 &amp; 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文