1

I have an html page (index.html) and css page (styles.css) with various elements (including a table) and styles:

index.html:

<!DOCTYPE html>
<html>
    <head>
        ...
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        ...
        <table>
        ...
    </body>
</html

styles.css:

...
*various styles*
...

I want to apply the pure[1] css styles to only the table (i.e. have all the styles.css styles apply, and then have any applicable pure styles override those of styles.css).

Something like this (so that the pure CSS doesn't influence any of the other elements):

index.html:

...
<table class="pure-table" css-src="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
...

I haven't been able to find a way to do this feasibly. I know I could comb through the pure CSS file and copy/paste/tweak styles into styles.css until it looks similar, but seems like there should be a better way (some kind of locally scoped CSS).

[1] https://purecss.io/start/

Joshua Mitchell
  • 81
  • 1
  • 6
  • Are you using any other style library like bootstrap? If there's no other class named equals to your actual css file style, you should include the css file on the header, or you can create a custom css file, copy-paste there the attribtues you want from the pure css and add it to the header. By the way: css-src doesn't exist. – FabriBertani Jan 05 '18 at 02:24
  • I'm just using styles.css. The problem with including the Pure css file in the header (in addition to styles.css) is that it affects all the other elements on the page. I can do that (copy-paste the attributes I want from pure), but I'm not sure if it's a good way to do it, knowing my use-case. I know css-src doesn't exist, I just put it to signify what I meant semantically. Sorry, I should have made that more clear. – Joshua Mitchell Jan 05 '18 at 14:25

1 Answers1

0

I did a copy paste after searching for 'table' in this file: https://unpkg.com/purecss@1.0.0/build/pure.css. It comes down the following CSS, which can be used like this, as I think it will not break anything else.

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.pure-table caption {
    color: #000;
    font: italic 85%/1 arial, sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td,
.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: 0.5em 1em;
}

.pure-table td:first-child,
.pure-table th:first-child {
    border-left-width: 0;
}

.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}

.pure-table td {
    background-color: transparent;
}
.pure-table-odd td {
    background-color: #f2f2f2;
}

.pure-table-striped tr:nth-child(2n-1) td {
    background-color: #f2f2f2;
}

.pure-table-bordered td {
    border-bottom: 1px solid #cbcbcb;
}
.pure-table-bordered tbody > tr:last-child > td {
    border-bottom-width: 0;
}

.pure-table-horizontal td,
.pure-table-horizontal th {
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #cbcbcb;
}
.pure-table-horizontal tbody > tr:last-child > td {
    border-bottom-width: 0;
}
Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60