Question

我想更改表格的宽度，但它会随处变化。我想在全屏时制作1000px的宽度。但它到处都能提供1000px。因此，当我裁剪页面时，表格不再响应。

实施例： Codepen http://codepen.io/anon/pen/OPjMyQ

/* 
Generic Styling, for Desktops/Laptops 
*/

.responsivetable {
  width: 100%;
  border-collapse: collapse;
}
/* Zebra striping */

.responsivetable tr:nth-of-type(odd) {
  background: #eee;
}
.responsivetable th {
  background: #333;
  color: white;
  font-weight: bold;
}
.responsivetable td,
.responsivetable th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
  /* Force table to not be like tables anymore */
  .responsivetable,
  .responsivetable thead,
  .responsivetable tbody,
  .responsivetable th,
  .responsivetable td,
  .responsivetable tr {
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  .responsivetable thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .responsivetable tr {
    border: 1px solid #ccc;
  }
  .responsivetable td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }
  .responsivetable 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;
  }
  /*
	Label the data
	*/
  .responsivetable td:nth-of-type(1):before {
    content: "Dag";
  }
  .responsivetable td:nth-of-type(2):before {
    content: "Tijd";
  }
  .responsivetable td:nth-of-type(3):before {
    content: "Vak";
  }
  .responsivetable td:nth-of-type(4):before {
    content: "Klas";
  }
  .responsivetable td:nth-of-type(5):before {
    content: "Lokaal";
  }
  .responsivetable td:nth-of-type(6):before {
    content: "Leraar";
  }
}

<table class="responsivetable">
  <thead>
    <tr>
      <th>Dag</th>
      <th>Tijd</th>
      <th>Vak</th>
      <th>Klas</th>
      <th>Lokaal</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Maandag</td>
      <td>08:45 - 09:35</td>
      <td>Vergadering</td>
      <td>IC.11AO.a</td>
      <td>158</td>
    </tr>
    <tr>
      <td>Maandag</td>
      <td>08:45 - 09:35</td>
      <td>Vergadering</td>
      <td>IC.11AO.a</td>
      <td>158</td>
    </tr>
    <tr>
      <td>Maandag</td>
      <td>08:45 - 09:35</td>
      <td>Vergadering</td>
      <td>IC.11AO.a</td>
      <td>158</td>
    </tr>
    <tr>
      <td>Maandag</td>
      <td>08:45 - 09:35</td>
      <td>Vergadering</td>
      <td>IC.11AO.a</td>
      <td>158</td>
    </tr>
    <tr>
      <td>Maandag</td>
      <td>08:45 - 09:35</td>
      <td>Vergadering</td>
      <td>IC.11AO.a</td>
      <td>158</td>
    </tr>
    <tr>
      <td>Maandag</td>
      <td>08:45 - 09:35</td>
      <td>Vergadering</td>
      <td>IC.11AO.a</td>
      <td>158</td>
    </tr>

  </tbody>
</table>

Answer 1

你的问题不清楚。到处都是1000px？

简单的解决方案是，将其包装在div中并将div设置为max-width:1000px;

<div class="responsive">
<table class="responsivetable">
...
</table>
</div>

.responsive{max-width:1000px;}
.responsivetable{width:100%;}

这将确保当页面全屏时，最外面的div将是1000px，并且表格将始终是周围div的100％。因此，因为在任何元素上没有固定宽度，所以它们将根据屏幕尺寸进行响应。

-Epik

仅在媒体屏幕时将宽度更改为*** px

1 个答案: