bulma-responsive-tables
Version:
Responsive collapsable tables for Bulma CSS Framework
1,142 lines (1,134 loc) • 60 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bulma Responsive Tables demo</title>
<link rel="icon" href="https://static.justboil.me/assets/jblogo-icon-150.png">
<meta name="description" content="Responsive tables for Bulma CSS Framework">
<meta property="og:url" content="https://justboil.github.io/bulma-responsive-tables/">
<meta property="og:site_name" content="JustBoil.me / Bulma Responsive Tables">
<meta property="og:title" content="Bulma Responsive Tables">
<meta property="og:description" content="Responsive tables for Bulma CSS Framework">
<meta property="og:image" content="https://justboil.me/images/bulma-responsive-tables/repository-preview-hi-res.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1920">
<meta property="og:image:height" content="960">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Bulma Responsive Tables">
<meta property="twitter:description" content="Responsive tables for Bulma CSS Framework">
<meta property="twitter:image:src" content="https://justboil.me/images/bulma-responsive-tables/repository-preview-hi-res.png">
<meta property="twitter:image:width" content="1920">
<meta property="twitter:image:height" content="960">
<link rel="stylesheet" href="css/bulma.min.css">
<link rel="stylesheet" href="css/main.min.css">
<style type="text/css">
h1.title, h3.subtitle {
text-align: center;
}
h1.title {
font-weight: 900;
}
.is-main h1.title {
font-size: 3rem;
}
.is-main h3.subtitle {
font-size: 2rem;
}
footer.footer .logo img {
max-height: 30px;
width: auto;
}
</style>
</head>
<body>
<nav class="navbar is-light is-spaced" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="https://justboil.me/bulma-admin-template/">
<img src="https://static.justboil.me/assets/logo-black.png" alt="Vue.js Buefy Bulma Admin Templates">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="https://justboil.github.io/bulma-switch-control/">Bulma Switch</a>
<a class="navbar-item" href="https://justboil.github.io/bulma-radio/">Bulma Radio</a>
<a class="navbar-item" href="https://justboil.github.io/bulma-checkbox/">Bulma Checkbox</a>
<a class="navbar-item is-active" href="https://justboil.github.io/bulma-responsive-tables/">Bulma Tables</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a href="https://github.com/justboil/bulma-responsive-tables" class="button is-small">
<span class="icon">
<i class="mdi mdi-github-circle"></i>
</span>
<span>Back to GitHub Repo</span>
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<section class="hero is-light is-main">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-centered">
<span class="icon">
<i class="mdi mdi-bulma"></i>
</span>
Bulma responsive tables
</h1>
<h3 class="subtitle has-text-centered">No JS. CSS/SCSS-only package for Bulma</h3>
<figure class="image">
<img src="demo-preview.png" alt="Bulma responsive tables CSS/SCSS-only">
</figure>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="b-table">
<div class="table-wrapper has-mobile-cards">
<table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Company</th>
<th>City</th>
<th>Progress</th>
<th>Created</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/rebecca-bauch.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Rebecca Bauch</td>
<td data-label="Company">Daugherty-Daniel</td>
<td data-label="City">South Cory</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="79">79</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Oct 25, 2020">Oct 25, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/felicita-yundt.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Felicita Yundt</td>
<td data-label="Company">Johns-Weissnat</td>
<td data-label="City">East Ariel</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="67">67</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jan 8, 2019">Jan 8, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/mr-larry-satterfield-v.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Mr. Larry Satterfield V</td>
<td data-label="Company">Hyatt Ltd</td>
<td data-label="City">Windlerburgh</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="16">16</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Dec 18, 2020">Dec 18, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/mr-broderick-kub.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Mr. Broderick Kub</td>
<td data-label="Company">Kshlerin, Bauch and Ernser</td>
<td data-label="City">New Kirstenport</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="71">71</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Sep 13, 2020">Sep 13, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/barry-weber.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Barry Weber</td>
<td data-label="Company">Schulist, Mosciski and Heidenreich</td>
<td data-label="City">East Violettestad</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="80">80</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jul 24, 2019">Jul 24, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/bert-kautzer-md.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Bert Kautzer MD</td>
<td data-label="Company">Gerhold and Sons</td>
<td data-label="City">Mayeport</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="62">62</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Mar 30, 2019">Mar 30, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/lonzo-steuber.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Lonzo Steuber</td>
<td data-label="Company">Skiles Ltd</td>
<td data-label="City">Marilouville</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="17">17</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Feb 12, 2019">Feb 12, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/jonathon-hahn.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Jonathon Hahn</td>
<td data-label="Company">Flatley Ltd</td>
<td data-label="City">Billiemouth</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="74">74</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Dec 30, 2020">Dec 30, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/ryley-wuckert.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Ryley Wuckert</td>
<td data-label="Company">Heller-Little</td>
<td data-label="City">Emeraldtown</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="54">54</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jun 28, 2019">Jun 28, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/sienna-hayes.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Sienna Hayes</td>
<td data-label="Company">Conn, Jerde and Douglas</td>
<td data-label="City">Jonathanfort</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="55">55</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Mar 7, 2019">Mar 7, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="hero is-light">
<div class="hero-body">
<div class="container">
<h1 class="title">Sortable Bulma table CSS & HTML</h1>
<h3 class="subtitle">Check desktop & mobile layout</h3>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="b-table">
<div class="field table-mobile-sort">
<div class="field has-addons">
<div class="control is-expanded">
<span class="select is-fullwidth">
<select>
<option>Name</option>
<option>Company</option>
<option>City</option>
</select>
</span>
</div>
<div class="control">
<button class="button is-primary">
<span class="icon is-small"><i class="mdi mdi-arrow-up"></i></span>
</button>
</div>
</div>
</div>
<div class="table-wrapper has-mobile-cards">
<table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
<thead>
<tr>
<th></th>
<th class="is-current-sort is-sortable">
<div class="th-wrap">
Name <span class="icon is-small"><i class="mdi mdi-arrow-up"></i></span>
</div>
</th>
<th class="is-sortable">
<div class="th-wrap">
Company <span class="icon is-small is-invisible"><i class="mdi mdi-arrow-up"></i></span>
</div>
</th>
<th class="is-sortable">
<div class="th-wrap">
City <span class="icon is-small is-invisible"><i class="mdi mdi-arrow-up"></i></span>
</div>
</th>
<th>Progress</th>
<th>Created</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/rebecca-bauch.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Rebecca Bauch</td>
<td data-label="Company">Daugherty-Daniel</td>
<td data-label="City">South Cory</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="79">79</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Oct 25, 2020">Oct 25, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/felicita-yundt.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Felicita Yundt</td>
<td data-label="Company">Johns-Weissnat</td>
<td data-label="City">East Ariel</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="67">67</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jan 8, 2019">Jan 8, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/mr-larry-satterfield-v.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Mr. Larry Satterfield V</td>
<td data-label="Company">Hyatt Ltd</td>
<td data-label="City">Windlerburgh</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="16">16</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Dec 18, 2020">Dec 18, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/mr-broderick-kub.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Mr. Broderick Kub</td>
<td data-label="Company">Kshlerin, Bauch and Ernser</td>
<td data-label="City">New Kirstenport</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="71">71</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Sep 13, 2020">Sep 13, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/barry-weber.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Barry Weber</td>
<td data-label="Company">Schulist, Mosciski and Heidenreich</td>
<td data-label="City">East Violettestad</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="80">80</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jul 24, 2019">Jul 24, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="hero is-light">
<div class="hero-body">
<div class="container">
<h1 class="title">Paginated Bulma table CSS & HTML</h1>
<h3 class="subtitle">Check desktop & mobile layout</h3>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="b-table has-pagination">
<div class="table-wrapper has-mobile-cards">
<table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Company</th>
<th>City</th>
<th>Progress</th>
<th>Created</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/rebecca-bauch.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Rebecca Bauch</td>
<td data-label="Company">Daugherty-Daniel</td>
<td data-label="City">South Cory</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="79">79</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Oct 25, 2020">Oct 25, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/felicita-yundt.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Felicita Yundt</td>
<td data-label="Company">Johns-Weissnat</td>
<td data-label="City">East Ariel</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="67">67</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jan 8, 2019">Jan 8, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/mr-larry-satterfield-v.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Mr. Larry Satterfield V</td>
<td data-label="Company">Hyatt Ltd</td>
<td data-label="City">Windlerburgh</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="16">16</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Dec 18, 2020">Dec 18, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/mr-broderick-kub.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Mr. Broderick Kub</td>
<td data-label="Company">Kshlerin, Bauch and Ernser</td>
<td data-label="City">New Kirstenport</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="71">71</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Sep 13, 2020">Sep 13, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/barry-weber.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Barry Weber</td>
<td data-label="Company">Schulist, Mosciski and Heidenreich</td>
<td data-label="City">East Violettestad</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="80">80</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jul 24, 2019">Jul 24, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="notification">
<div class="level">
<div class="level-left">
<div class="level-item">
<div class="buttons has-addons">
<button type="button" class="button is-active">1</button>
<button type="button" class="button">2</button>
<button type="button" class="button">3</button>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<small>Page 1 of 3</small>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="hero is-light">
<div class="hero-body">
<div class="container">
<h1 class="title">Checkable Bulma table rows CSS & HTML</h1>
<h3 class="subtitle">Check desktop & mobile layout</h3>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="b-table">
<div class="table-wrapper has-mobile-cards">
<table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
<thead>
<tr>
<th class="is-checkbox-cell">
<label class="checkbox">
<input type="checkbox" value="false">
</label>
</th>
<th></th>
<th>Name</th>
<th>Company</th>
<th>City</th>
<th>Progress</th>
<th>Created</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="is-checkbox-cell">
<label class="checkbox">
<input type="checkbox" checked>
</label>
</td>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/rebecca-bauch.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Rebecca Bauch</td>
<td data-label="Company">Daugherty-Daniel</td>
<td data-label="City">South Cory</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="79">79</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Oct 25, 2020">Oct 25, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-checkbox-cell">
<label class="checkbox">
<input type="checkbox">
</label>
</td>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/felicita-yundt.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Felicita Yundt</td>
<td data-label="Company">Johns-Weissnat</td>
<td data-label="City">East Ariel</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="67">67</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jan 8, 2019">Jan 8, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-checkbox-cell">
<label class="checkbox">
<input type="checkbox">
</label>
</td>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/mr-larry-satterfield-v.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Mr. Larry Satterfield V</td>
<td data-label="Company">Hyatt Ltd</td>
<td data-label="City">Windlerburgh</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="16">16</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Dec 18, 2020">Dec 18, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-checkbox-cell">
<label class="checkbox">
<input type="checkbox">
</label>
</td>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/mr-broderick-kub.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Mr. Broderick Kub</td>
<td data-label="Company">Kshlerin, Bauch and Ernser</td>
<td data-label="City">New Kirstenport</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="71">71</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Sep 13, 2020">Sep 13, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-checkbox-cell">
<label class="checkbox">
<input type="checkbox">
</label>
</td>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/barry-weber.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Barry Weber</td>
<td data-label="Company">Schulist, Mosciski and Heidenreich</td>
<td data-label="City">East Violettestad</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="80">80</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jul 24, 2019">Jul 24, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="hero is-light">
<div class="hero-body">
<div class="container">
<h1 class="title">Expandable Bulma table rows CSS & HTML</h1>
<h3 class="subtitle">Check desktop & mobile layout</h3>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="b-table">
<div class="table-wrapper has-mobile-cards">
<table class="table is-fullwidth is-hoverable is-fullwidth">
<thead>
<tr>
<th class="is-chevron-cell"></th>
<th></th>
<th>Name</th>
<th>Company</th>
<th>City</th>
<th>Progress</th>
<th>Created</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="is-chevron-cell">
<a role="button">
<span class="icon is-expanded"><i class="mdi mdi-chevron-right mdi-24px"></i></span>
</a>
</td>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/rebecca-bauch.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Rebecca Bauch</td>
<td data-label="Company">Daugherty-Daniel</td>
<td data-label="City">South Cory</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="79">79</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Oct 25, 2020">Oct 25, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr class="detail">
<td colspan="8">
<div class="detail-container">
<article class="media">
<figure class="media-left">
<div class="image is-64x64">
<img src="https://avatars.dicebear.com/v2/initials/rebecca-bauch.svg">
</div>
</figure>
<div class="media-content">
<div class="content">
<p><strong>Rebecca Bauch</strong> <small>@rbauch</small> <small>1d</small><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin ornare magna eros, eu pellentesque tortor vestibulum ut.
Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
</div>
</article>
</div>
</td>
</tr>
<tr>
<td class="is-chevron-cell">
<a role="button">
<span class="icon"><i class="mdi mdi-chevron-right mdi-24px"></i></span>
</a>
</td>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/felicita-yundt.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Felicita Yundt</td>
<td data-label="Company">Johns-Weissnat</td>
<td data-label="City">East Ariel</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="67">67</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jan 8, 2019">Jan 8, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-chevron-cell">
<a role="button">
<span class="icon"><i class="mdi mdi-chevron-right mdi-24px"></i></span>
</a>
</td>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/mr-larry-satterfield-v.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Mr. Larry Satterfield V</td>
<td data-label="Company">Hyatt Ltd</td>
<td data-label="City">Windlerburgh</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="16">16</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Dec 18, 2020">Dec 18, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-chevron-cell">
<a role="button">
<span class="icon"><i class="mdi mdi-chevron-right mdi-24px"></i></span>
</a>
</td>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/mr-broderick-kub.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Mr. Broderick Kub</td>
<td data-label="Company">Kshlerin, Bauch and Ernser</td>
<td data-label="City">New Kirstenport</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="71">71</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Sep 13, 2020">Sep 13, 2020</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary" type="button">
<span class="icon"><i class="mdi mdi-eye"></i></span>
</button>
<button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="mdi mdi-trash-can"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-chevron-cell">
<a role="button">
<span class="icon"><i class="mdi mdi-chevron-right mdi-24px"></i></span>
</a>
</td>
<td class="is-image-cell">
<div class="image">
<img src="https://avatars.dicebear.com/v2/initials/barry-weber.svg" class="is-rounded">
</div>
</td>
<td data-label="Name">Barry Weber</td>
<td data-label="Company">Schulist, Mosciski and Heidenreich</td>
<td data-label="City">East Violettestad</td>
<td data-label="Progress" class="is-progress-cell">
<progress max="100" class="progress is-small is-primary" value="80">80</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jul 24, 2019">Jul 24, 2019</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-primary"