Question

我试图使我的所有表在我的网站上统一，因此我对表使用相同的类调用。在台式机上浏览时，一切正常，但不幸的是，在移动设备上进行测试时，我的表无法跨越页面和空格列的整个宽度，并且某些表甚至出于某些无法解释的原因而删除了标题！

这是我的CSS代码，

table {

  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-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th {
background-color: #545556;
    color: white;
  padding: .425em;
  text-align: center;
  font-size: .75em;
  letter-spacing: .1em;
  text-transform: uppercase;    
}

table td {
  padding: .425em;
  text-align: center;
    word-wrap: break-word;
    font-size: 0.75em;
}

@media screen and (max-width: 768px) {
img {max-width: 30%;}

    table {
    align-items: center;
        border: 0;
        display: inherit;
        font-size: 0.5em;
        width: 100%;
  }
img {max-width: 30%;}
  table caption {
    font-size: 1.3em;
        overflow: hidden;
  }

table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
  }

  table tr {
    border-bottom: 1px solid #ddd;
    font-size: 0.4em;
    margin-bottom: .625em;
        display: inherit;
        width: 100%;
  }

  table td {
    border-bottom: 1px solid #ddd;
    font-size: .4em;
    text-align: center;
  }
  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;
  }
}

HTML;

<table >
    <tbody>
        <thead>
            <th> TEST</th>
            <th> TEST</th>
            <th> TEST</th>
            <th> TEST</th>
            <th> TEST</th>
        </thead>
        <tr>
            <td> TEST</td>
            <td> TEST</td>
            <td> TEST</td>
            <td>TEST </td>
            <td>TEST </td>
        </tr>
        <tr>
            <td> TEST</td>
            <td>TEST </td>
            <td>TEST </td>
            <td>TEST </td>
            <td>TEST </td>
        </tr>
        <tr>
            <td> TEST</td>
            <td> TEST</td>
            <td> TEST</td>
            <td> TEST</td>
            <td> TEST</td>
        </tr>
        <tr>
            <td>TEST </td>
            <td>TEST </td>
            <td>TEST </td>
            <td>TEST </td>
            <td>TEST </td>
        </tr>
    </tbody>
</table>

CSS Fiddle； http://jsfiddle.net/dn1e9saL/1/

Answer 1

因为您在其上设置了position: absolute;，所以标题消失了，并且因为您在其上设置了display: inherit;，所以表格不是全角。

只需在媒体查询中删除这些样式，它就可以正常工作。

移动电话的响应表未全角（css）

1 个答案: