Question

我的桌子有问题。此表是手机的主要表格。当我有电话垂直时，表格没有显示线程，但是当我有水平电话时，它显示正确。

当电话垂直时，有人可以帮我在手机上正确显示这张桌子吗？

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  /*table-layout: fixed;*/
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: .35em;
}

table tr:hover {
  background-color: #f5f5f5;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background-color: #333333;
  color: #fff;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 60px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    display: block;
    width: 0px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    /*//spodok tabulky*/
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    /*Hrubka ciary medzi riadkam*/
    display: block;
    font-size: .8em;
    text-align: center;
    /*Pozicia textu*/
  }
  table td:before {
    /*
		* aria-label has no advantage, it won't be read inside a table
		content: attr(aria-label);
		*/
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
  table td:nth-child(even) {
    background-color: #f2f2f2;
  }
}

<table>
  <thead>
    <tr>
      <!--<th>Poradie</th>-->
      <th>Císlo zákazky</th>
      <th>Pozícia</th>
      <th>Poradové císlo</th>
      <th>Stav</th>
    </tr>
  </thead>
</table>

感谢您的回复。

Answer 1

这是一个简单的解决方法。移除clip: rect(0 0 0 0);和width: 0px;。这些行会隐藏整个thead，因为@media条件会以纵向模式（较窄的屏幕）启动。

你可能想要重做你的CSS的整个@media部分 - 它总体上有点奇怪。也许在狭窄的屏幕上添加一些你最初打算做的细节。

＆＃13;

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  /*table-layout: fixed;*/
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: .35em;
}

table tr:hover {
  background-color: #f5f5f5;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background-color: #333333;
  color: #fff;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    height: 60px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    display: block;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    /*//spodok tabulky*/
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    /*Hrubka ciary medzi riadkam*/
    display: block;
    font-size: .8em;
    text-align: center;
    /*Pozicia textu*/
  }
  table td:before {
    /*
		* aria-label has no advantage, it won't be read inside a table
		content: attr(aria-label);
		*/
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
  table td:nth-child(even) {
    background-color: #f2f2f2;
  }
}

＆＃13;

<table>
  <thead>
    <tr>
      <!--<th>Poradie</th>-->
      <th>Císlo zákazky</th>
      <th>Pozícia</th>
      <th>Poradové císlo</th>
      <th>Stav</th>
    </tr>
  </thead>
</table>

＆＃13;

Answer 2

让我们删除EnvironmentTestUtils.addEnvironment(env, "org=Spring", "name=Boot");位置并显示规则。

现在我们可以看到func showMapMarker() { self.currentLocationMapView.clear() DispatchQueue.main.async { let position = CLLocationCoordinate2D(latitude: latitude, longitude: longitude) let marker = GMSMarker(position: position) let bounds: GMSCoordinateBounds = GMSCoordinateBounds(coordinate: position, coordinate: position) marker.title = "Snippet Title" marker.map = self.currentLocationMapView marker.snippet = "Snippet Text" let camera = self.currentLocationMapView.camera(for: bounds, insets: UIEdgeInsets()) self.currentLocationMapView.animate(with: GMSCameraUpdate.fit(bounds, withPadding: 15.0)) self.currentLocationMapView.camera = camera! } }。您可以添加其余样式。

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

thead

thead

thead没有显示

2 个答案: