Comments (14)
k03n00b
commented on July 17, 2024
11
After multiple hours of debug, I figured out how to fix this.
This works:
table.tablesaw
{
table-layout: fixed;
max-width: none;
width: auto;
min-width: 100%;
}
This fails almost randomly with iPhone 6 (iOS 8.1.1)
table.tablesaw
{
table-layout: fixed;
max-width: 100%;
width: 100%;
}
Procedure to get always this bug:
- Open your http://localhost/demo.html
- Refresh with Safari's refresh -button/icon
- Activate URL writing by tapping on domain from address bar
- Don't change anything, leave http://localhost/demo.html and tap blue Open/Go/Submit (whatever) -button
Bug appears
Tables SHOULD work with width: 100% too, so this problem should be fixed.
from tablesaw.
cbier
commented on July 17, 2024
3
@zachleat why is table-layout:fixed not recommended? I need to use it to wrap long text in my swipe table's persisted column
from tablesaw.
oilvier
commented on July 17, 2024
I've got the problem too.
Your solution worked, thanks @k03n00b
from tablesaw.
zachleat
commented on July 17, 2024
I can’t reproduce this with the stock swipe table. Can you attach your markup?
from tablesaw.
k03n00b
commented on July 17, 2024
HTML - table.html
<!DOCTYPE html>
<html lang="fi">
<head>
<title>Table</title>
<meta charset="utf-8">
<meta name="robots" content="index, follow, noodp, noydir">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimal-ui">
<meta name="HandheldFriendly" content="True">
<meta content="fi" http-equiv="content-language">
<link rel="stylesheet" href="table.css" media="all">
<script src="http://ftlabs.github.io/fastclick/lib/fastclick.js"></script>
<script src="http://filamentgroup.github.io/tablesaw/dist/dependencies/jquery.js"></script>
<script src="http://filamentgroup.github.io/tablesaw/dist/tablesaw.js"></script>
</head>
<body>
<div id="whole_page">
<div id="content_statistics">
<div class="tablesaw-bar mode-swipe"></div>
<table class="tablesaw" id="table_statistics" data-tablesaw-mode="swipe" data-tablesaw-sortable data-tablesaw-sortable>
<thead>
<tr>
<th class="tablesaw-cell-persist sortable-head sortable-ascending wide" data-tablesaw-priority="persist" data-tablesaw-sortable-col data-tablesaw-sortable-switch data-tablesaw-sortable-default-col>
<span> </span>
</th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed time"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
<th data-tablesaw-sortable-col data-tablesaw-sortable-switch class="width-fixed number"><span>test</span></th>
</tr>
</thead>
<tbody>
<tr class="highlightti">
<td class="tablesaw-cell-persist">
test
</td>
<td class="width-fixed time">
test
</td>
<td class="width-fixed number">
850
</td>
<td class="width-fixed number">
1483
</td>
<td class="width-fixed number">
78
</td>
<td class="width-fixed number">
41
</td>
<td class="width-fixed number">
108
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
21
</td>
<td class="width-fixed number">
30
</td>
<td class="width-fixed number">
22
</td>
<td class="width-fixed number">
17
</td>
<td class="width-fixed number">
45
</td>
<td class="width-fixed number">
18
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
2406
</td>
<td class="width-fixed number">
666
</td>
<td class="width-fixed number">
335
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
12
</td>
<td class="width-fixed number">
18
</td>
<td class="width-fixed number">
850
</td>
</tr>
<tr>
<td class="tablesaw-cell-persist">
test1
</td>
<td class="width-fixed time">
test1
</td>
<td class="width-fixed number">
450
</td>
<td class="width-fixed number">
207
</td>
<td class="width-fixed number">
14
</td>
<td class="width-fixed number">
22
</td>
<td class="width-fixed number">
7
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
22
</td>
<td class="width-fixed number">
22
</td>
<td class="width-fixed number">
4
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
450
</td>
<td class="width-fixed number">
540
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
5
</td>
<td class="width-fixed number">
450
</td>
</tr>
<tr>
<td class="tablesaw-cell-persist">
test2
</td>
<td class="width-fixed time">
test2
</td>
<td class="width-fixed number">
120
</td>
<td class="width-fixed number">
238
</td>
<td class="width-fixed number">
3
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
23
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
8
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
3
</td>
<td class="width-fixed number">
15
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
18
</td>
<td class="width-fixed number">
18
</td>
<td class="width-fixed number">
35
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
12
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
1
</td>
</tr>
<tr>
<td class="tablesaw-cell-persist">
test3
</td>
<td class="width-fixed time">
test3
</td>
<td class="width-fixed number">
70
</td>
<td class="width-fixed number">
398
</td>
<td class="width-fixed number">
18
</td>
<td class="width-fixed number">
9
</td>
<td class="width-fixed number">
30
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
11
</td>
<td class="width-fixed number">
5
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
4
</td>
<td class="width-fixed number">
12
</td>
<td class="width-fixed number">
8
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
4
</td>
<td class="width-fixed number">
55
</td>
<td class="width-fixed number">
126
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
1 dl
</td>
</tr>
<tr>
<td class="tablesaw-cell-persist">
test4
</td>
<td class="width-fixed time">
test4
</td>
<td class="width-fixed number">
160
</td>
<td class="width-fixed number">
353
</td>
<td class="width-fixed number">
33
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
25
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
4
</td>
<td class="width-fixed number">
4
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
1915
</td>
<td class="width-fixed number">
31
</td>
<td class="width-fixed number">
44
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
14
</td>
<td class="width-fixed number">
160
</td>
</tr>
<tr>
<td class="tablesaw-cell-persist">
test5
</td>
<td class="width-fixed time">
test6
</td>
<td class="width-fixed number">
50
</td>
<td class="width-fixed number">
287
</td>
<td class="width-fixed number">
10
</td>
<td class="width-fixed number">
9
</td>
<td class="width-fixed number">
23
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
4
</td>
<td class="width-fixed number">
12
</td>
<td class="width-fixed number">
4
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
19
</td>
<td class="width-fixed number">
23
</td>
<td class="width-fixed number">
130
</td>
<td class="width-fixed number">
3
</td>
<td class="width-fixed number">
3
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
50
</td>
</tr>
<tr class="highlightti">
<td class="tablesaw-cell-persist">
sample
</td>
<td class="width-fixed time">
sample
</td>
<td class="width-fixed number">
200
</td>
<td class="width-fixed number">
119
</td>
<td class="width-fixed number">
20
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
505
</td>
<td class="width-fixed number">
234
</td>
<td class="width-fixed number">
24
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
200
</td>
</tr>
<tr>
<td class="tablesaw-cell-persist">
sample1
</td>
<td class="width-fixed time">
sample1
</td>
<td class="width-fixed number">
200
</td>
<td class="width-fixed number">
119
</td>
<td class="width-fixed number">
20
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
505
</td>
<td class="width-fixed number">
234
</td>
<td class="width-fixed number">
24
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
200
</td>
</tr>
<tr>
<td class="tablesaw-cell-persist">
sample1
</td>
<td class="width-fixed time">
sample1
</td>
<td class="width-fixed number">
200
</td>
<td class="width-fixed number">
119
</td>
<td class="width-fixed number">
20
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
505
</td>
<td class="width-fixed number">
234
</td>
<td class="width-fixed number">
24
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
200
</td>
</tr>
<tr>
<td class="tablesaw-cell-persist">
sample1
</td>
<td class="width-fixed time">
sample1
</td>
<td class="width-fixed number">
200
</td>
<td class="width-fixed number">
119
</td>
<td class="width-fixed number">
20
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
505
</td>
<td class="width-fixed number">
234
</td>
<td class="width-fixed number">
24
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
200
</td>
</tr>
<tr>
<td class="tablesaw-cell-persist">
sample1
</td>
<td class="width-fixed time">
sample1
</td>
<td class="width-fixed number">
200
</td>
<td class="width-fixed number">
119
</td>
<td class="width-fixed number">
20
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
505
</td>
<td class="width-fixed number">
234
</td>
<td class="width-fixed number">
24
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
200
</td>
</tr>
<tr>
<td class="tablesaw-cell-persist">
sample1
</td>
<td class="width-fixed time">
sample1
</td>
<td class="width-fixed number">
200
</td>
<td class="width-fixed number">
119
</td>
<td class="width-fixed number">
20
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
505
</td>
<td class="width-fixed number">
234
</td>
<td class="width-fixed number">
24
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
200
</td>
</tr>
<tr>
<td class="tablesaw-cell-persist">
sample1
</td>
<td class="width-fixed time">
sample1
</td>
<td class="width-fixed number">
200
</td>
<td class="width-fixed number">
119
</td>
<td class="width-fixed number">
20
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
6
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
505
</td>
<td class="width-fixed number">
234
</td>
<td class="width-fixed number">
24
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
1
</td>
<td class="width-fixed number">
2
</td>
<td class="width-fixed number">
0
</td>
<td class="width-fixed number">
200
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
CSS - table.css
table
{
border-collapse: collapse;
border: 1px solid #ccc;
}
button
{
border: 1px solid #ccc;
}
.tablesaw.averages .tablesaw-cell-persist
{
white-space: nowrap;
text-align: center;
width: 80px !important;
max-width: 100px !important;
}
.tablesaw-bar .tablesaw-advance > .btn.left, .icon-arrow-gray-left
{
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%227.5px%22%20height%3D%2211.2px%22%20viewBox%3D%220%200%207.5%2011.2%22%20enable-background%3D%22new%200%200%207.5%2011.2%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23808080%22%20stroke-width%3D%222.2691%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%20%206.3%2C1.1%201.1%2C5.9%206.3%2C10.1%20%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
}
.tablesaw-bar .tablesaw-advance > .btn.right, .icon-arrow-gray-right
{
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%227.5px%22%20height%3D%2211.2px%22%20viewBox%3D%220%200%207.5%2011.2%22%20enable-background%3D%22new%200%200%207.5%2011.2%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23808080%22%20stroke-width%3D%222.2691%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%20%201.1%2C1.1%206.3%2C5.9%201.1%2C10.1%20%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
}
.highlightti td
{
border-bottom-color: #ccc !important;
border-right-color: #ccc !important;
font-weight: bold;
background: #EDEDED !important;
}
.favorite td
{
background: #C5DBE0 !important;
border-right-color: #99B7C0 !important;
border-bottom-color: #99B7C0 !important;
}
.favorite-item td
{
background: #EDF3F5 !important;
border-right-color: #C5DBE0 !important;
border-bottom-color: #C5DBE0 !important;
color: #637c85 !important;
font-style: italic;
}
table.tablesaw
{
table-layout: fixed;
empty-cells: show;
max-width: 100%;
width: 100%;
}
.tablesaw-swipe .wide
{
width: 158px;
min-width: 158px;
}
.tablesaw.averages .width-fixed,
.tablesaw.averages .width-fixed button
{
width: 93px;
min-width: 93px !important;
max-width: none !important;
}
.tablesaw {
width: 100%;
visibility: hidden;
}
.tablesaw.tablesaw-swipe
{
visibility: visible !important;
}
.tablesaw-bar .left
{
float: none;
}
.tablesaw-bar
{
min-height: 58px;
}
.tablesaw
{
border: 0;
padding: 0;
}
.tablesaw th,
.tablesaw td
{
color: #000;
box-sizing: border-box;
padding: 0;
}
.tablesaw td
{
background: #fff;
line-height: 22px;
padding: 7px 9px;
border-right: 1px solid #dcdcdc;
}
.tablesaw .width-fixed,
.tablesaw .width-fixed button
{
white-space: nowrap;
overflow: hidden;
}
.tablesaw .width-fixed-double
{
overflow: hidden;
}
.tablesaw-enhanced .tablesaw-bar .btn {
border: 1px solid #ccc;
background: none;
background-color: #fafafa;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 0 rgba(255,255,255,1);
color: #4a4a4a;
clear: both;
cursor: pointer;
display: block;
margin: 0;
padding: .5em .85em .4em .85em;
position: relative;
text-align: center;
text-decoration: none;
text-transform: capitalize;
text-shadow: 0 1px 0 #fff;
width: 100%;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba( 255,255,255,.1 )), color-stop(50%, rgba( 255,255,255,.1 )), color-stop(55%, rgba( 170,170,170,.1 )), to(rgba( 120,120,120,.15 )));
background-image: -webkit-linear-gradient(top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100%);
background-image: linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
-webkit-appearance: none !important;
-moz-appearance: none !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
border-radius: .25em;
opacity: 1;
}
.tablesaw-bar .tablesaw-advance {
position: relative;
top: -2.6em;
}
.tablesaw-advance .btn {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-shadow: 0 1px 0 #fff;
}
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn {
display: inline-block;
overflow: hidden;
width: 70px;
height: 70px;
background-position: 50% 50%;
background-size: 50%;
margin-left: 30px;
}
.tablesaw-advance a.tablesaw-nav-btn.disabled {
opacity: .25;
cursor: default;
pointer-events: none;
}
.tablesaw-bar {
clear: both;
}
.tablesaw-bar.mode-swipe {
margin-top: -2em;
position: relative;
top: 2em;
}
.tablesaw-bar .btn,
.tablesaw-enhanced .tablesaw-bar .btn {
margin-top: 9px;
margin-bottom: 6px;
}
.tablesaw-bar.mode-swipe {
top: 0;
margin: 15px 30px;
}
.tablesaw-bar .tablesaw-advance {
position: static;
}
.tablesaw-bar {
margin-top: 0;
position: static;
}
.tablesaw thead
{
border: 1px solid #e5e5e4;
background: #fff;
}
.tablesaw thead tr:first-child th
{
font-weight: normal;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
}
.tablesaw th:last-child,
.tablesaw td:last-child
{
border-right: none !important;
}
.tablesaw tbody td
{
vertical-align: middle;
border-bottom: 1px solid #DCDCDC;
}
.tablesaw-swipe .tablesaw-cell-persist
{
border-right: 1px solid #dcdcdc;
overflow: hidden;
}
.tablesaw-swipe .tablesaw-cell-persist
{
-webkit-box-shadow: 3px 0 4px -1px #dcdcdc;
box-shadow: 3px 0 4px -1px #dcdcdc;
}
.tablesaw-swipe th.tablesaw-cell-hidden,
.tablesaw-swipe td.tablesaw-cell-hidden
{
display: none;
}
.tablesaw-sortable,
.tablesaw-sortable thead,
.tablesaw-sortable thead tr,
.tablesaw-sortable thead tr th {
position: relative;
}
.tablesaw-sortable th.sortable-head span
{
width: 100px;
display: block;
text-align: left;
overflow: hidden;
transform: rotate(-52deg);
}
.tablesaw td.number
{
padding-left: 16px;
padding-right: 17px;
text-align: right;
}
.tablesaw-sortable .sortable-head button
{
height: 100px;
width: 100%;
min-width: 100%;
color: inherit;
background: transparent;
padding: 0;
text-align: left;
font: inherit;
text-transform: inherit;
position: relative;
}
.tablesaw th.number,
.tablesaw th.number button,
.tablesaw-sortable .sortable-head.number button
{
text-align: left;
}
.tablesaw-sortable .width-fixed.sortable-head.sortable-ascending,
.tablesaw-sortable .width-fixed.sortable-head.sortable-descending
{
background: #338BB1 !important;
color: #ffffff !important;
}
.tablesaw-advance {
display: block;
float: right;
}
from tablesaw.
amaisano
commented on July 17, 2024
Have you taken a look at this table-layout: fixed bug related post? https://stackoverflow.com/questions/3715325/weird-table-layoutfixed-bug-on-webkit?answertab=active#tab-top
I started here on this github thread, but ended up there. I was having similar issues but they extended to all -webkit browsers, desktop and mobile. Turns out widths need to be recalculated by resetting table-layout: fixed after and only if a width is previously set.
from tablesaw.
zachleat
commented on July 17, 2024
Hm, a couple of things. I’ve created a branch for this issue. I checked your test files in here: https://github.com/filamentgroup/tablesaw/tree/issue-58/demo/issues
I am still not able to reproduce the issue on my personal device: iPhone 6 running iOS 8.1.2. Are you able to recreate using the branch above?
Keep in mind that table-layout: fixed is not recommended for global Tablesaw tables. We only use it in one place inside of the tablesaw css: to save widths only after a swipe has occurred on the swipe table.
I will leave this open for now, but as it stands I’ve been unable to reproduce this. If I can’t reproduce, I can’t fix.
from tablesaw.
ogrethegreat
commented on July 17, 2024
I ran into this as well. It seems to only occur on tables where ajax loaded data is substantially larger than the original table header structure. If you drag and resize the window it will recalculate and self correct. The fixed style above does in fact correct the issue. I imagine it has something to do with the order of events in which the data is loaded into the dom and cols are calculated. Great script.
from tablesaw.
danilinked
commented on July 17, 2024
@cbier I need to use long text in my swipe table but in a row. Any news about this @zachleat
from tablesaw.
melvinnos
commented on July 17, 2024
This solved my problem as well!! Thank you very much @k03n00b!!!! Thumbs up!
from tablesaw.
Codepadawan
commented on July 17, 2024
I had this issue also. Thanks @k03n00b
from tablesaw.
zachleat
commented on July 17, 2024
@cbier Sorry I was unclear (and super late to respond here). You can use it without issue.
However, I don’t think we should include it in the tablesaw library by default though, as it changes how tables size to their content in ways that are unexpected if you’re not aware of it.
from tablesaw.
zachleat
commented on July 17, 2024
Closing per inactivity.
from tablesaw.
anilkachhadiya
commented on July 17, 2024
Thanks @k03n00b !! It works perfect.
from tablesaw.
Related Issues (20)
- Remove table-layout: fixed for swipe tables.
- Tablesaw.js causing multiple console issues like placeholder is undefined, focus() is not a function
- Tablesaw choking with large data sets? HOT 3
- Fire event after initialization is complete
- Media query breaking format for print HOT 1
- Column Name missing on mobile view HOT 2
- Using tabs with hidden tables prevents hidden tables from being initialized HOT 2
- Colspan behavior in stack mode HOT 1
- Bug with rowspan
- Remember options after page refresh
- B Tags for Column Headers
- Error in not tablesaw tables
- Re-initialising tablesaw 3.1.2 in swipe mode HOT 1
- Table is not accessible by screen readers at mobile display size HOT 1
- Initialize with Selector Instead of Data Attribute?
- Swipe table doesn't work properly with datatables plugins
- header sorting is not working when append data from api
- Not working well on angular project
- Shoestring, jQuery, Webpacker expose-loader, mayhem... HOT 2
- TypeError: $(...).metisMenu is not a function HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tablesaw.