1. Summary
I don't find, how I can shrink a table, if it really needed:
if a table not fully displayed and horizontal scrollbar appear.
2. Limitation
I have a static site. It would be nice any solutions for JavaScript include JQuery, Bootstrap or another libraries; but not solutions for dynamic sites.
3. Example
Table on Repl.it:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>
Document
</title>
<script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" defer></script>
<!-- https://fooplugins.com/footable-jquery/documentation/ -->
<!-- http://fooplugins.github.io/FooTable/docs/examples/basic/single-header.html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.min.js" defer></script>
<script src="footable.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.standalone.min.css"/>
</head>
<body>
<div class="justtable">
<table class="table">
<thead>
<tr>
<th>
No.
</th>
<th data-breakpoints="x-small">
Name
</th>
<th data-breakpoints="x-small">
Town
</th>
<th data-breakpoints="x-small">
Quality of work
</th>
<th data-breakpoints="x-small">
Characteristics
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Kira
</td>
<td>
Velikiy Novgorod
</td>
<td>
Great
</td>
<td>
You're one in a million, You're once in a lifetime, You made me discover one of the stars above us, You're one in a million
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Sasha
</td>
<td>
Kazan
</td>
<td>
Amazing
</td>
<td>
Sometimes, Love can hit You everyday, Sometimes, You can fall for everyone you see, But only One can really make me stay, The sign, the one in the sky, has said to me
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Nervov
</td>
<td>
Saint-Petersburg
</td>
<td>
Beautiful
</td>
<td>
I always will remember how I felt that day, A feeling indescribable to me, yeah, I always knew there was an answer for my prayer, And You, You're the One, the One for me
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
footable.js:
jQuery(function($) {
$('.table').footable({
"breakpoints": {
"x-small": 200,
"small": 300
}
});
});
4. Details
I have a table:
I open a table on a mobile device with small screen → not all table display, I see horizontal scrollbar:
But some plugins can shrink a table for small screens:
5. Responsive plugins algorithm
For breakpoint == 800px:
if screen size > breakpoint
table not shrink
else:
table shrink
5.1. Problem of plugins algorithm
If small breakpoint value:
not all table display as in 4.2 item of this question.
else big breakpoint value:
small tables shrink on big screens. This is inconvenient for users.
6. Expected behavior
If full table display on screen:
table not shrink
else not full table display as in 4.2 item of this question:
table shrink
Can I get similar behavior?
7. Not helped
7.1. table-layout: fixed
As in this answer:
table {
table-layout: fixed;
}
Behavior on small screens:
Problems:
- Words go beyond cells and screen
- Small cells size
7.2. Plugins as FooTable
I try some plugins for responsive tables creating. I get behavior as in 5.1.1 item of this answer. Fixed px breakpoint used in these plugins:
- FooTables V3 (read
breakpointssection) - jquery-responsive-tables
7.3. Plugins as DataTable
I try some plugins, that hide, not shrink on small screens data of tables.
Example:
- Big screen — 8 rows:
- Small screen — 2 rows display fully, 1 — partially:
I have this behavior for these plugins:
8. Do not offer
- Yes, I know about
overflow-x: auto. This is not entirely on the topic of this question.
