根据屏幕更改表格主体答案

【问题标题】：Change body of table according to the screen根据屏幕更改表格主体
【发布时间】：2019-08-18 05:08:22
【问题描述】：

我正在使用 bootstrap 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>

【问题讨论】：

请分享您的代码。
如果不能显示“全屏”内的所有列，则显示“智能屏幕”

标签： css twitter-bootstrap-3 html-table responsive-design

【解决方案1】：

如果您使用的是引导程序 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>

【讨论】：

【解决方案2】：

显示属性应该可以工作。

显示属性https://getbootstrap.com/docs/4.0/utilities/display

工作原理

使用我们的响应式显示实用程序类更改显示属性的值。我们特意只支持显示所有可能值的一个子集。可以根据需要组合类以获得各种效果。

隐藏元素

Hidden on all   .d-none
Hidden only on xs   .d-none .d-sm-block
Hidden only on sm   .d-sm-none .d-md-block
Hidden only on md   .d-md-none .d-lg-block
Hidden only on lg   .d-lg-none .d-xl-block
Hidden only on xl   .d-xl-none
Visible on all  .d-block
Visible only on xs  .d-block .d-sm-none
Visible only on sm  .d-none .d-sm-block .d-md-none
Visible only on md  .d-none .d-md-block .d-lg-none
Visible only on lg  .d-none .d-lg-block .d-xl-none
Visible only on xl  .d-none .d-xl-block

【讨论】：

我不谈论网格系统，我希望只显示一个
如果可行，您可以单击标记以显示这是正确答案吗？
答案指的是bootstrap 4，问题表明使用的是bootstrap 3
糟糕，抱歉。 Bootstrap 3 显然有例如 .visible-lg。这个问题可能会帮助stackoverflow.com/questions/19098376/…