Skip to content

Commit

Permalink
breakpoinsive tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@volodkina01
volodkina01 committed Aug 19, 2024
1 parent a477e60 commit b9c7b82
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 43 deletions.
2 changes: 1 addition & 1 deletion css/index.css
View file

Large diffs are not rendered by default.

35 changes: 33 additions & 2 deletions css/scss/pages/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ $red-darken: #581010;
&__item {
border: 1px solid var(--c-border);
position: relative;
margin: 10px 0;
margin: 20px 0;
font-size: 18px;
background: $dark;
background: var(--c-bg-item);
padding: 10px;
padding-left: 30px;
border-radius: 5px;
Expand Down Expand Up @@ -368,6 +368,7 @@ dl {
border: 1px solid var(--c-border);
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}

table {
Expand Down Expand Up @@ -582,6 +583,36 @@ table {
overflow-x: auto;
}

@media (max-width: 576px) {
.hscroll-sm {
overflow-x: auto;
}
}

@media (max-width: 768px) {
.hscroll-md {
overflow-x: auto;
}
}

@media (max-width: 992px) {
.hscroll-lg {
overflow-x: auto;
}
}

@media (max-width: 1200px) {
.hscroll-xl {
overflow-x: auto;
}
}

@media (max-width: 1400px) {
.hscroll-xxl {
overflow-x: auto;
}
}

.list {
margin-bottom: 0.5rem;
border: 1px solid var(--c-border);
Expand Down
34 changes: 14 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2219,7 +2219,7 @@ <h1>Vertical alignment</h1>
<p>Table cells of <span class="index-readme__code">&lt;thead></span> are always vertical aligned to the
bottom. Table cells in <span class="index-readme__code">&lt;tbody></span> inherit their alignment from
<span class="index-readme__code">&lt;table></span> and are aligned to the top by default. Use the <span
class="index-readme__code">vertical align</span>classes to re-align where needed.
class="index-readme__code">vertical align</span> classes to re-align where needed.
</p>
<div class="example-tables">
<table class="table align-middle">
Expand Down Expand Up @@ -2267,7 +2267,6 @@ <h1>Vertical alignment</h1>
<p>HTML:</p>
<div class="index-readme__item">
<ul>
<li>&lt;div class="table-responsive"></li>
<li>&lt;table class="table align-middle"></li>
<li>&lt;thead></li>
<li>&lt;tr></li>
Expand All @@ -2289,7 +2288,6 @@ <h1>Vertical alignment</h1>
<li>&lt;/tr></li>
<li>&lt;/tbody></li>
<li>&lt;/table></li>
<li>&lt;/div></li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -2755,12 +2753,12 @@ <h1>Always responsive</h1>
<div class="index-readme__title">
<h1>Breakpoint specific</h1>
</div>
<p>Use <span class="index-readme__code">.table-responsive{-sm|-md|-lg|-xl|-xxl}</span> as needed to create
<p>Use <span class="index-readme__code">.hscroll{-sm|-md|-lg|-xl|-xxl}</span> as needed to create
responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave
normally and not scroll horizontally.</p>
<p>These tables may appear broken until their responsive styles apply at specific viewport widths.</p>
<div class="example-tables">
<div class="table-responsive">
<div class="hscroll">
<table class="table">
<thead>
<tr>
Expand All @@ -2773,7 +2771,6 @@ <h1>Breakpoint specific</h1>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
Expand All @@ -2787,7 +2784,6 @@ <h1>Breakpoint specific</h1>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
Expand All @@ -2799,7 +2795,6 @@ <h1>Breakpoint specific</h1>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
Expand All @@ -2811,14 +2806,13 @@ <h1>Breakpoint specific</h1>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="example-tables">
<div class="table-responsive-sm">
<div class="hscroll-sm">
<table class="table">
<thead>
<tr>
Expand Down Expand Up @@ -2872,7 +2866,7 @@ <h1>Breakpoint specific</h1>
</div>
</div>
<div class="example-tables">
<div class="table-responsive-md">
<div class="hscroll-md">
<table class="table">
<thead>
<tr>
Expand Down Expand Up @@ -2926,7 +2920,7 @@ <h1>Breakpoint specific</h1>
</div>
</div>
<div class="example-tables">
<div class="table-responsive-lg">
<div class="hscroll-lg">
<table class="table">
<thead>
<tr>
Expand Down Expand Up @@ -2980,7 +2974,7 @@ <h1>Breakpoint specific</h1>
</div>
</div>
<div class="example-tables">
<div class="table-responsive-xl">
<div class="hscroll-xl">
<table class="table">
<thead>
<tr>
Expand Down Expand Up @@ -3034,7 +3028,7 @@ <h1>Breakpoint specific</h1>
</div>
</div>
<div class="example-tables">
<div class="table-responsive-xxl">
<div class="hscroll-xxl">
<table class="table">
<thead>
<tr>
Expand Down Expand Up @@ -3089,32 +3083,32 @@ <h1>Breakpoint specific</h1>
</div>
<div class="index-readme__item">
<ul>
<li>&lt;div class="table-responsive"></li>
<li>&lt;div class="hscroll"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
<li>&lt;/div></li><br>
<li>&lt;div class="table-responsive-sm"></li>
<li>&lt;div class="hscroll-sm"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
<li>&lt;/div></li><br>
<li>&lt;div class="table-responsive-md"></li>
<li>&lt;div class="hscroll-md"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
<li>&lt;/div></li><br>
<li>&lt;div class="table-responsive-lg"></li>
<li>&lt;div class="hscroll-lg"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
<li>&lt;/div></li><br>
<li>&lt;div class="table-responsive-xl"></li>
<li>&lt;div class="hscroll-xl"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
<li>&lt;/div></li><br>
<li>&lt;div class="table-responsive-xxl"></li>
<li>&lt;div class="hscroll-xxl"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
Expand Down
34 changes: 14 additions & 20 deletions pages/index/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2028,7 +2028,7 @@ <h1>Vertical alignment</h1>
<p>Table cells of <span class="index-readme__code">&lt;thead></span> are always vertical aligned to the
bottom. Table cells in <span class="index-readme__code">&lt;tbody></span> inherit their alignment from
<span class="index-readme__code">&lt;table></span> and are aligned to the top by default. Use the <span
class="index-readme__code">vertical align</span>classes to re-align where needed.
class="index-readme__code">vertical align</span> classes to re-align where needed.
</p>
<div class="example-tables">
<table class="table align-middle">
Expand Down Expand Up @@ -2076,7 +2076,6 @@ <h1>Vertical alignment</h1>
<p>HTML:</p>
<div class="index-readme__item">
<ul>
<li>&lt;div class="table-responsive"></li>
<li>&lt;table class="table align-middle"></li>
<li>&lt;thead></li>
<li>&lt;tr></li>
Expand All @@ -2098,7 +2097,6 @@ <h1>Vertical alignment</h1>
<li>&lt;/tr></li>
<li>&lt;/tbody></li>
<li>&lt;/table></li>
<li>&lt;/div></li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -2564,12 +2562,12 @@ <h1>Always responsive</h1>
<div class="index-readme__title">
<h1>Breakpoint specific</h1>
</div>
<p>Use <span class="index-readme__code">.table-responsive{-sm|-md|-lg|-xl|-xxl}</span> as needed to create
<p>Use <span class="index-readme__code">.hscroll{-sm|-md|-lg|-xl|-xxl}</span> as needed to create
responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave
normally and not scroll horizontally.</p>
<p>These tables may appear broken until their responsive styles apply at specific viewport widths.</p>
<div class="example-tables">
<div class="table-responsive">
<div class="hscroll">
<table class="table">
<thead>
<tr>
Expand All @@ -2582,7 +2580,6 @@ <h1>Breakpoint specific</h1>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
Expand All @@ -2596,7 +2593,6 @@ <h1>Breakpoint specific</h1>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
Expand All @@ -2608,7 +2604,6 @@ <h1>Breakpoint specific</h1>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
Expand All @@ -2620,14 +2615,13 @@ <h1>Breakpoint specific</h1>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="example-tables">
<div class="table-responsive-sm">
<div class="hscroll-sm">
<table class="table">
<thead>
<tr>
Expand Down Expand Up @@ -2681,7 +2675,7 @@ <h1>Breakpoint specific</h1>
</div>
</div>
<div class="example-tables">
<div class="table-responsive-md">
<div class="hscroll-md">
<table class="table">
<thead>
<tr>
Expand Down Expand Up @@ -2735,7 +2729,7 @@ <h1>Breakpoint specific</h1>
</div>
</div>
<div class="example-tables">
<div class="table-responsive-lg">
<div class="hscroll-lg">
<table class="table">
<thead>
<tr>
Expand Down Expand Up @@ -2789,7 +2783,7 @@ <h1>Breakpoint specific</h1>
</div>
</div>
<div class="example-tables">
<div class="table-responsive-xl">
<div class="hscroll-xl">
<table class="table">
<thead>
<tr>
Expand Down Expand Up @@ -2843,7 +2837,7 @@ <h1>Breakpoint specific</h1>
</div>
</div>
<div class="example-tables">
<div class="table-responsive-xxl">
<div class="hscroll-xxl">
<table class="table">
<thead>
<tr>
Expand Down Expand Up @@ -2898,32 +2892,32 @@ <h1>Breakpoint specific</h1>
</div>
<div class="index-readme__item">
<ul>
<li>&lt;div class="table-responsive"></li>
<li>&lt;div class="hscroll"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
<li>&lt;/div></li><br>
<li>&lt;div class="table-responsive-sm"></li>
<li>&lt;div class="hscroll-sm"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
<li>&lt;/div></li><br>
<li>&lt;div class="table-responsive-md"></li>
<li>&lt;div class="hscroll-md"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
<li>&lt;/div></li><br>
<li>&lt;div class="table-responsive-lg"></li>
<li>&lt;div class="hscroll-lg"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
<li>&lt;/div></li><br>
<li>&lt;div class="table-responsive-xl"></li>
<li>&lt;div class="hscroll-xl"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
<li>&lt;/div></li><br>
<li>&lt;div class="table-responsive-xxl"></li>
<li>&lt;div class="hscroll-xxl"></li>
<li>&lt;table class="table"></li>
<li>...</li>
<li>&lt;/table></li>
Expand Down

0 comments on commit b9c7b82

Please sign in to comment.