使用纯CSS规则在小屏幕上制作全宽度td表

Question

您能否请看一下这段代码，让我知道如何在小型设备上td 100%的全宽度，如第二td小于800的方式在纯CSS CSS规则下的第一个主张？

<table class="responsive">
            <tbody>
                    <tr>
                        <td>Date</td>
                        <td>Jan 19 2016</td>
                    </tr>
            </tbody>
</table> 

我已经尝试过这个

@media only screen and (max-width: 800px) {
  td{width:100% !important;}
}

使每个td的宽度达到100％，但这不是正常工作

Answer 1

您只需在display上重置：

@media only screen and (max-width: 800px) {
  td {
    display: block
  }
}

http://codepen.io/anon/pen/PZKqLz

Answer 2

您可以使用display: table-row;

＆＃13;

＆＃13;

@media only screen and (max-width: 800px) {
  td{
    display: table-row;
  }
}

＆＃13;

<table class="responsive">
   <tbody>
     <tr>
       <td>Date</td>
       <td>Jan 19 2016</td>
     </tr>
   </tbody>
 </table>

＆＃13;

＆＃13;

＆＃13;