Skip to content

Instantly share code, notes, and snippets.

@pborenstein pborenstein/list-table.css
Last active Feb 19, 2019

Embed
What would you like to do?
Use Markdown lists to describe tables
/****
list-table
Make Markdown lists behave as a table.
https://www.pborenstein.com/articles/tablehacks/
Usage:
<div class="list-table extra" markdown="1">
- - **State**
- **Capital**
- **Size**
- - Texas
- Austin
- Medium
- - California
- Sacramento
- Medium
- - Illinois
- Springfield
- Medium
</div>
****/
div[class~="list-table"] > ul {
display: table;
list-style: none;
width: 100%;
margin: 1em 0;
padding: 0;
}
div[class~="list-table"] > ul > li {
display: table-row-group;
}
div[class~="list-table"] > ul > li:nth-child(even) {
background-color: #eee;
}
div[class~="list-table"] > ul > li:nth-child(odd) {
background-color: #fff;
}
div[class~="list-table"] > ul > li > ul {
display: table-row;
}
div[class~="list-table"] > ul > li > ul > li {
display: table-cell;
padding: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.