diff --git a/guides/assets/javascripts/responsive-tables.js b/guides/assets/javascripts/responsive-tables.js
deleted file mode 100644
index 1c0f28c993..0000000000
--- a/guides/assets/javascripts/responsive-tables.js
+++ /dev/null
@@ -1,46 +0,0 @@
-(function() {
- "use strict";
-
- var switched = false;
-
- var updateTables = function() {
- if (document.documentElement.clientWidth < 767 && !switched) {
- switched = true;
- each(document.querySelectorAll("table.responsive"), splitTable);
- } else {
- switched = false;
- each(document.querySelectorAll(".table-wrapper table.responsive"), unsplitTable);
- }
- }
-
- document.addEventListener("turbolinks:load", function() {
- each(document.querySelectorAll(":not(.syntaxhighlighter)>table"), function(element) {
- element.classList.add("responsive");
- });
- updateTables();
- });
-
- window.addEventListener("resize", updateTables);
-
- var splitTable = function(original) {
- wrap(original, createElement("div", "table-wrapper"));
-
- var copy = original.cloneNode(true);
- each(copy.querySelectorAll("td:not(:first-child), th:not(:first-child)"), function(element) {
- element.style.display = "none";
- });
- copy.classList.remove("responsive");
-
- original.parentNode.append(copy);
- wrap(copy, createElement("div", "pinned"))
- wrap(original, createElement("div", "scrollable"));
- }
-
- var unsplitTable = function(original) {
- each(document.querySelectorAll(".table-wrapper .pinned"), function(element) {
- element.parentNode.removeChild(element);
- });
- unwrap(original.parentNode);
- unwrap(original);
- }
-}).call(this);
diff --git a/guides/assets/stylesheets/main.css b/guides/assets/stylesheets/main.css
index 94f3466d4d..e8fedbddc6 100644
--- a/guides/assets/stylesheets/main.css
+++ b/guides/assets/stylesheets/main.css
@@ -71,11 +71,14 @@ textarea, select {
table {
margin: 0 0 1.5em;
- border: 2px solid #CCC;
background: #FFF;
border-collapse: collapse;
}
+tbody, thead {
+ border: 2px solid #CCC;
+}
+
table th, table td {
padding: 9px 10px;
border: 1px solid #CCC;
@@ -88,6 +91,17 @@ table th {
font-weight: bold;
}
+@media only screen and (max-width: 480px) {
+ table {
+ display: block;
+ overflow-x: auto;
+ }
+
+ td {
+ min-width: 7em;
+ }
+}
+
img {
max-width: 100%;
}
@@ -754,24 +768,3 @@ span.token.sh.important {
text-shadow: 2px 2px 4px #5400007d;
background: radial-gradient(circle, rgb(255, 10, 0) 0%, rgb(200, 0, 0) 90%);
}
-
-/* Foundation v2.1.4 http://foundation.zurb.com */
-/* Artfully masterminded by ZURB */
-
-/* Mobile */
-@media only screen and (max-width: 767px) {
- table.responsive { margin-bottom: 0; }
-
- .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
- .pinned table { border-right: none; border-left: none; width: 100%; }
- .pinned table th, .pinned table td { white-space: nowrap; }
- .pinned td:last-child { border-bottom: 0; }
-
- div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
- div.table-wrapper div.scrollable table { margin-left: 35%; }
- div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
-
- table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
- table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
-
-}
diff --git a/guides/assets/stylesheets/main.rtl.css b/guides/assets/stylesheets/main.rtl.css
index 7bc355dc28..561f06d839 100644
--- a/guides/assets/stylesheets/main.rtl.css
+++ b/guides/assets/stylesheets/main.rtl.css
@@ -71,11 +71,14 @@ textarea, select {
table {
margin: 0 0 1.5em;
- border: 2px solid #CCC;
background: #FFF;
border-collapse: collapse;
}
+tbody, thead {
+ border: 2px solid #CCC;
+}
+
table th, table td {
padding: 9px 10px;
border: 1px solid #CCC;
@@ -88,6 +91,17 @@ table th {
font-weight: bold;
}
+@media only screen and (max-width: 480px) {
+ table {
+ display: block;
+ overflow-x: auto;
+ }
+
+ td {
+ min-width: 7em;
+ }
+}
+
img {
max-width: 100%;
}
@@ -738,25 +752,4 @@ div.important p, div.caution p, div.warning p, div.note p, div.info p {
top: 0px;
z-index: 100;
border: none;
-}
-
-/* Foundation v2.1.4 http://foundation.zurb.com */
-/* Artfully masterminded by ZURB */
-
-/* Mobile */
-@media only screen and (max-width: 767px) {
- table.responsive { margin-bottom: 0; }
-
- .pinned { position: absolute; right: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
- .pinned table { border-left: none; border-right: none; width: 100%; }
- .pinned table th, .pinned table td { white-space: nowrap; }
- .pinned td:last-child { border-bottom: 0; }
-
- div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-left: 1px solid #ccc; }
- div.table-wrapper div.scrollable table { margin-right: 35%; }
- div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
-
- table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
- table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
-
-}
+}
\ No newline at end of file
diff --git a/guides/source/layout.html.erb b/guides/source/layout.html.erb
index d79c6b1e39..5e3e850442 100644
--- a/guides/source/layout.html.erb
+++ b/guides/source/layout.html.erb
@@ -12,7 +12,6 @@
-