Responsive table html,css
Question
I have this css style for responsive table. it works as expected in firefox but not in chrome.
In chrome all the text mixed, and it seems that their is a layers.
what is the problem in the code that it works on firefox but not in chrome?
@media only screen and (max-width: 800px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-right: 50%; white-space: normal; text-align: right; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; right: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: right; font-weight: bold; } /* Label the data */ td:before { content: attr(data-title); }; }
<table> <thead> <tr> <th>title 1</th> <th>title 2</th> <th>title 3</th> <th>title 4</th> <th>title 5</th> </tr> </thead> <tbody> <tr> <td data-title="title1"> text </td> <td data-title="title2"> text </td> <td data-title="title3"> text </td> <td data-title="title4"> text </td> <td data-title="title5"> text </td> </tr> </tbody> </table>
In the preview it seems ok in chrome byt if I create new simple html file with the table in the body it look very bad. I understand that I need add something to the css or to the body but I dont know what. This is how it looks like when I make the screen width small then 800px
1 answers
solution1
0 ACCPTED 2015-10-13 15:47:43
From the comments it was found you were missing a doctype. A doctype is required of all modern web pages. Without one, you are in "quirks mode" and things like margin and padding and all kinds of things do not follow the W3C box model .
Adding this to the very first line keeps all browsers in "standards mode"
<!DOCTYPE html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.