Question

我正在使用引导程序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>

Answer 1

显示属性应该起作用。

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

工作方式

使用我们的响应式显示实用程序类更改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

Answer 2

如果您使用的是引导程序3.3.7，那么此代码将为您提供帮助，您只需将class =“ table table-sensitive”放在table标记中。该表将响应。

<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 个答案: