Permalink
Browse files

feat(table): updated table css and added readme

  • Loading branch information...
katrin-freihofner committed Apr 5, 2017
1 parent f33d8ba commit 01af8e6547bccb2163445fde75fec879552a2ba3
Showing with 56 additions and 1 deletion.
  1. +1 −1 package.json
  2. +51 −0 src/table/README.md
  3. +4 −0 src/table/table.scss
View
@@ -1,6 +1,6 @@
{
"name": "@dynatrace/groundhog",
"version": "0.5.0",
"version": "0.6.0",
"description": "CSS components for Dynatrace",
"main": "dist/js/main.js",
"scripts": {
View
@@ -0,0 +1,51 @@
---
layout: components_icons.hbs
meta:
title: "Table"
description: "A table component for Dynatrace styled web entities with css and markup examples."
keywords: "table, Dynatrace, groundhog, css component"
---
## Introduction
The Groundhog **table** usually holds multiple columns of text. The table component is used to present information in a structured format.
## Table versions
The Groundhog table appears in three versions:
* Standard table `table`
* Responsive table `table--responsive`
* The [expandable table](../table-expandable/)
## Including a table
1. To include a Groundhog table add a `<table>` element. Add other table elements like in the example. Include the necessary text.
```html
<table class="table">
<thead>
<tr>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
```
2. Add the necessary Groundhog classes to the elements class attribute.
```html
<table class="table">...</table>
```
3. The table is ready to use
## Available classes for table
| class name | effect |
|------------|--------|
| `.table` | Base class for the table element |
| `.table--responsive` | Sets the table to behave responsively |
View
@@ -44,6 +44,10 @@ $breakpoint: 920px;
width: 100%;
}
.table--responsive tbody th {
display: none;
}
.table--responsive tr {
display: block;
width: 100%;

0 comments on commit 01af8e6

Please sign in to comment.