m3g4p0p/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Bootstrap card table PoC

Download zip file, then
yarn install
yarn build

  
## card-table.html
<!DOCTYPE html>
<head>
  <title>Card Table</title>
  <link rel="stylesheet" href="./card-table.css">
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Occupation</th>
      <th>Homepage</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-header="Name">John</td>
      <td data-header="Age">27</td>
      <td data-header="Occupation">Developer</td>
      <td data-header="Homepage">
        <a href="www.johnthedevloper.com">www.johnthedevloper.com</a>
      </td>
    </tr>
    <tr>
      <td data-header="Name">Jane</td>
      <td data-header="Age">33</td>
      <td data-header="Occupation">Designer</td>
      <td data-header="Homepage">
        <a href="www.janethedesigner.com">www.janethedesigner.com</a>
      </td>
    </tr>
    <tr>
      <td data-header="Name">Jenny</td>
      <td data-header="Age">17</td>
      <td data-header="Occupation">Project manager</td>
      <td data-header="Homepage">
        <a href="www.jennythepm.com">www.jennythepm.com</a>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

## card-table.scss
@import './node_modules/bootstrap/scss/bootstrap.scss';

tr {
  @extend .card;
  @extend .list-group;
}

th,
td {
  &:first-child {
    @extend .list-group-item-primary;
  }

  &:last-child {
    @extend .card-footer;
  }

  &:not(:last-child) {
    @extend .list-group-item;
  }
}

@media screen and (max-width: 480px) {
  tbody {
    display: flex;
    flex-wrap: wrap;
  }

  thead {
    display: none;
  }

  tr {
    margin: .5em;
    flex-grow: 1;
  }

  td {
    &::before {
      content: attr(data-header) ': ';
    }

    &:first-child {
      font-weight: bold;
    }

    &:first-child,
    &:last-child {
      &::before {
        content: '';
      }
    }
  }
}

@media screen and (min-width: 481px) {
  tbody {
    display: table-row-group;
  }

  thead {
    display: table-header-group;
  }

  tr {
    display: table-row;
  }

  td,
  th {
    display: table-cell !important;
    color: inherit !important;
    background-color: inherit !important;
  }
}

## package.json
{
  "devDependencies": {
    "node-sass": "^4.9.0",
    "bootstrap": "^4.1.1"
  },
  "scripts": {
    "build": "node-sass card-table.scss card-table.css",
    "watch": "node-sass -w card-table.scss card-table.css"
  }
}
	<!DOCTYPE html>
	<head>
	<title>Card Table</title>
	<link rel="stylesheet" href="./card-table.css">
	</head>
	<body>
	<table>
	<thead>
	<tr>
	<th>Name</th>
	<th>Age</th>
	<th>Occupation</th>
	<th>Homepage</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td data-header="Name">John</td>
	<td data-header="Age">27</td>
	<td data-header="Occupation">Developer</td>
	<td data-header="Homepage">
	<a href="www.johnthedevloper.com">www.johnthedevloper.com</a>
	</td>
	</tr>
	<tr>
	<td data-header="Name">Jane</td>
	<td data-header="Age">33</td>
	<td data-header="Occupation">Designer</td>
	<td data-header="Homepage">
	<a href="www.janethedesigner.com">www.janethedesigner.com</a>
	</td>
	</tr>
	<tr>
	<td data-header="Name">Jenny</td>
	<td data-header="Age">17</td>
	<td data-header="Occupation">Project manager</td>
	<td data-header="Homepage">
	<a href="www.jennythepm.com">www.jennythepm.com</a>
	</td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>
	@import './node_modules/bootstrap/scss/bootstrap.scss';

	tr {
	@extend .card;
	@extend .list-group;
	}

	th,
	td {
	&:first-child {
	@extend .list-group-item-primary;
	}

	&:last-child {
	@extend .card-footer;
	}

	&:not(:last-child) {
	@extend .list-group-item;
	}
	}

	@media screen and (max-width: 480px) {
	tbody {
	display: flex;
	flex-wrap: wrap;
	}

	thead {
	display: none;
	}

	tr {
	margin: .5em;
	flex-grow: 1;
	}

	td {
	&::before {
	content: attr(data-header) ': ';
	}

	&:first-child {
	font-weight: bold;
	}

	&:first-child,
	&:last-child {
	&::before {
	content: '';
	}
	}
	}
	}

	@media screen and (min-width: 481px) {
	tbody {
	display: table-row-group;
	}

	thead {
	display: table-header-group;
	}

	tr {
	display: table-row;
	}

	td,
	th {
	display: table-cell !important;
	color: inherit !important;
	background-color: inherit !important;
	}
	}
	{
	"devDependencies": {
	"node-sass": "^4.9.0",
	"bootstrap": "^4.1.1"
	},
	"scripts": {
	"build": "node-sass card-table.scss card-table.css",
	"watch": "node-sass -w card-table.scss card-table.css"
	}
	}