Identical CSS working on JSFiddle, broken in browser

问题

I'm trying to make responsive tables using the No More Tables approach.

I've simply copied and pasted the code from the example above. It works fine on JSFiddle: http://jsfiddle.net/wcp62x7t/

But identical code in my browser does not work fine. The tables do not behave nicely when I reduce the size of the browser window:

What am I doing wrong? Here's the complete HTML file that I'm trying in my browser: I've tried it in both Safari and Chrome on OSX and get the odd behaviour above.

<html>
  <head>
    <style>
    @media only screen and (max-width: 800px) {

  /* Force table to not be like tables anymore */
  #no-more-tables table,
  #no-more-tables thead,
  #no-more-tables tbody,
  #no-more-tables th,
  #no-more-tables td,
  #no-more-tables tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  #no-more-tables thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #no-more-tables tr { border: 1px solid #ccc; }

  #no-more-tables td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align:left;
  }

  #no-more-tables td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
  }

  /*
  Label the data
  */
  #no-more-tables td:before { content: attr(data-title); }
}
    </style>
  </head>

  <body>

<section id="no-more-tables">
<table>
  <thead>
    <tr>
      <th>Code</th>
      <th>Company</th>
      <th class="numeric">Price</th>
      <th class="numeric">Change</th>
      <th class="numeric">Change %</th>
      <th class="numeric">Open</th>
      <th class="numeric">High</th>
      <th class="numeric">Low</th>
      <th class="numeric">Volume</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="Code">AAC</td>
      <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
      <td data-title="Price" class="numeric">$1.38</td>
      <td data-title="Change" class="numeric">-0.01</td>
      <td data-title="Change %" class="numeric">-0.36%</td>
      <td data-title="Open" class="numeric">$1.39</td>
      <td data-title="High" class="numeric">$1.39</td>
      <td data-title="Low" class="numeric">$1.38</td>
      <td data-title="Volume" class="numeric">9,395</td>
    </tr>
  </tbody>
</table>
</section>

</body>
</html>

UPDATE: The problem in the browser seems to be that the <td> elements are still set to display: table-cell even though I've explicitly styled them with display: block:

回答1:

Remove the media query tag @media only screen and (max-width: 800px) {}, it works fine after.

UPDATE: Adding <!DOCTYPE html> fixed the problem.

来源：https://stackoverflow.com/questions/28369454/identical-css-working-on-jsfiddle-broken-in-browser

标签

css

responsive-design

html-table