1

我们正在显示来自 json 响应的表数据。我们用于显示表格的响应式表格。

这是我的响应表示例代码

<table class = "responsivetable" width="200" border="1">
  <tr>
    <td>Scripted Testing</td>
    <td>Exploratory Testing</td>
  </tr>
  <tr>
    <td>Directed from requirements</td>
    <td>Directed from requirements and exploring during testing</td>
  </tr>
  <tr>
    <td>Determination of test cases well in advance</td>
    <td>Determination of test cases during testing</td>
  </tr>
</table>

响应式表格的样式

<style>
   /* General Table Style */
   table.responsivetable {
   width: 100%;
   border-collapse: collapse;
   }
   .responsivetable tr:nth-of-type(odd) {
   background-color: #eee;
   }
   .responsivetable thead tr td {
   background-color: #333;
   color: white;
   font-weight: bold;
   }
   .responsivetable td, .responsivetable th {
   padding: 6px;
   border: 1px solid #ccc;
   text-align: left;
   }

      /* Make Table Responsive --- */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
.responsivetable table, .responsivetable thead, .responsivetable th, .responsivetable tr, .responsivetable td {
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;
padding-left: 50%;
border-bottom: 1px solid #eee;
position: relative;
}
.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: "Scripted Testing"; }
.responsivetable td:nth-of-type(2):before { content: "Exploratory Testing"; }
}/* End responsive query */
</style>

此外，当我使用简单的表格并且没有响应时，一些表格也显示不合适。

在这里您可以查看表格的实际外观 - http://screencast.com/t/Z6mG7af3de63

现在，当我尝试在 android 应用程序中显示此表时，它看起来像这样 - http://screencast.com/t/pABJrUKDhh。

那么你们能建议我发生这种情况的实际问题是什么。

请帮忙。

4

0 回答 0