时间戳

首页 > 解决方案 > 根据屏幕更改表格主体

css - 根据屏幕更改表格主体

问题描述

我正在使用引导程序 3，我有一个必须根据屏幕大小更改正文的表格。查看css规则（@media），这是一个选项，但我希望它像响应表一样工作，所以我不必指出大小是多少，但它只标识列是否不适合屏幕的当前大小

<table>
  <thead>
      <tr class="fullScreen">
        ...
      </tr> 
      <tr class="smartScreen">
        ...
      </tr>
  </thead>
  <tbody>
      <tr class="fullScreen">
         ...
      </tr> 
      <tr class="smartScreen">
         ...
      </tr>
   </tbody>
</table>

标签： csstwitter-bootstrap-3html-tableresponsive-design

解决方案

如果您使用的是引导程序 3.3.7，那么此代码将对您有所帮助，您只需将 class="table table-responsive" 放入您的表格标签中。该表将响应。

<style>
    .table-responsive 
    { border: 0px !important; }
</style>



<body>
  <table class="table table-responsive">
   <thead>
     <tr>
       <td> col 1 </td>
       <td> col 2 </td>
     </tr> 
     <tr class="smartScreen">
       <td> col 1 </td>
       <td> col 2 </td>
    </tr>
 </thead>
 <tbody>
    <tr class="fullScreen">
      <td> col 1 </td>
      <td> col 2 </td>
    </tr> 
    <tr class="smartScreen">
      <td> col 1 </td>
      <td> col 2 </td>
   </tr>
 </tbody>

推荐阅读