Skip to content

Commit e25e3bf

Browse files
awerlangawerlang
committed
fix(style): ensure some minimum height, to handle cells with no content
add css classes: - responsive-omit-title: use on columns you want no title shown before the actual content - responsive-omit-if-empty: use on columns you want collapsed when empty Fixes #4
1 parent d79e277 commit e25e3bf

File tree

5 files changed

+68
-31
lines changed

5 files changed

+68
-31
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.idea/
22
bower_components/
33
node_modules/
4+
commit.txt

‎examples/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<script src="../release/angular-responsive-tables.js"></script>
66
<script src="controller.js"></script>
77
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8-
<link rel="stylesheet" href="../src/style.css">
8+
<link rel="stylesheet" href="../release/angular-responsive-tables.css">
99
</head>
1010
<body ng-controller="TestController as ctrl">
1111
<h1>Angular Responsive Tables</h1>

‎release/angular-responsive-tables.css‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,47 +11,65 @@
1111
/* table.responsive,*/
1212
.responsive thead,
1313
.responsive tbody,
14-
.responsive th,
15-
.responsive td,
16-
.responsive tr {
14+
.responsive tr,
15+
.responsive th {
1716
display: block;
1817
}
1918

20-
/* Hide table headers (but not display: none;, for accessibility) */
21-
.responsive thead tr {
22-
position: absolute;
23-
top: -9999px;
24-
left: -9999px;
25-
}
19+
/* Hide table headers (but not display: none;, for accessibility) */
20+
.responsive thead tr {
21+
position: absolute;
22+
top: -9999px;
23+
left: -9999px;
24+
}
2625

27-
.responsive tr {
28-
border: 1px solid #ccc;
29-
}
26+
.responsive tr {
27+
border: 1px solid #ccc;
28+
}
3029

31-
.responsive td, .table.responsive td {
30+
.responsive td:nth-child(odd), .responsive td:nth-child(even) {
3231
/* Behave like a "row" */
3332
border: none;
3433
border-bottom: 1px solid #eee;
3534
position: relative;
3635
padding-left: 50%;
3736
white-space: normal;
3837
text-align: left;
38+
39+
display: block;
40+
-webkit-box-sizing: content-box;
41+
-moz-box-sizing: content-box;
42+
box-sizing: content-box;
43+
min-height: 1em;
3944
}
4045

41-
.responsive td:before {
46+
.responsive td:nth-child(odd):before, .responsive td:nth-child(even):before {
4247
/* Now like a table header */
4348
position: absolute;
4449
/* Top/left values mimic padding */
4550
top: 6px;
4651
left: 6px;
4752
width: 45%;
4853
padding-right: 10px;
49-
white-space: nowrap;
54+
-ms-word-wrap: break-word;
55+
word-wrap: break-word;
5056
text-align: left;
5157
font-weight: bold;
5258
/*
5359
Label the data
5460
*/
5561
content: attr(data-title);
5662
}
63+
64+
.responsive td.responsive-omit-title:nth-child(odd), .responsive td.responsive-omit-title:nth-child(even) {
65+
padding-left: 6px;
66+
}
67+
68+
.responsive td.responsive-omit-title:before {
69+
display: none;
70+
}
71+
72+
.responsive td.responsive-omit-if-empty:empty {
73+
display: none;
74+
}
5775
}

‎release/angular-responsive-tables.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/style.css‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,21 @@
1111
/* table.responsive,*/
1212
.responsive thead,
1313
.responsive tbody,
14-
.responsive th,
15-
.responsive td,
16-
.responsive tr {
14+
.responsive tr,
15+
.responsive th {
1716
display: block;
1817
}
1918

20-
/* Hide table headers (but not display: none;, for accessibility) */
21-
.responsive thead tr {
22-
position: absolute;
23-
top: -9999px;
24-
left: -9999px;
25-
}
19+
/* Hide table headers (but not display: none;, for accessibility) */
20+
.responsive thead tr {
21+
position: absolute;
22+
top: -9999px;
23+
left: -9999px;
24+
}
2625

27-
.responsive tr {
28-
border: 1px solid #ccc;
29-
}
26+
.responsive tr {
27+
border: 1px solid #ccc;
28+
}
3029

3130
.responsive td:nth-child(odd), .responsive td:nth-child(even) {
3231
/* Behave like a "row" */
@@ -36,22 +35,41 @@
3635
padding-left: 50%;
3736
white-space: normal;
3837
text-align: left;
38+
39+
display: block;
40+
-webkit-box-sizing: content-box;
41+
-moz-box-sizing: content-box;
42+
box-sizing: content-box;
43+
min-height: 1em;
3944
}
4045

41-
.responsive td:before {
46+
.responsive td:nth-child(odd):before, .responsive td:nth-child(even):before {
4247
/* Now like a table header */
4348
position: absolute;
4449
/* Top/left values mimic padding */
4550
top: 6px;
4651
left: 6px;
4752
width: 45%;
4853
padding-right: 10px;
49-
white-space: nowrap;
54+
-ms-word-wrap: break-word;
55+
word-wrap: break-word;
5056
text-align: left;
5157
font-weight: bold;
5258
/*
5359
Label the data
5460
*/
5561
content: attr(data-title);
5662
}
63+
64+
.responsive td.responsive-omit-title:nth-child(odd), .responsive td.responsive-omit-title:nth-child(even) {
65+
padding-left: 6px;
66+
}
67+
68+
.responsive td.responsive-omit-title:before {
69+
display: none;
70+
}
71+
72+
.responsive td.responsive-omit-if-empty:empty {
73+
display: none;
74+
}
5775
}

0 commit comments

Comments
 (0)