首页 > 解决方案 > 定义表行空间

问题描述

如何定义表空间?

在此处输入图像描述

我想让空间更小,我的图标不会消失,还有一个问题,小屏幕我的图标被隐藏了

在此处输入图像描述

在此处输入图像描述

小屏幕时我需要保持图标的大小,请帮助

<div class="card-body">
  <div class="main-content-label mg-b-5">
    Simple Table
  </div>
  <p class="mg-b-20">Example of redash Simple Table.</p>
  <div class="table-responsive">
    <table class="table mg-b-0 text-md-nowrap">
      <thead>
        <tr>
          @foreach($tipos as $tipo)
          <th><img style="height: 32px; width: 32px;" src="{{url($tipo->icono)}}" alt=""></th>
          @endforeach
        </tr>
      </thead>
    </table>
  </div>
</div>
</div>

标签: htmlcss

解决方案


当屏幕尺寸减小时,使用 CSS 媒体查询来确定图标的大小,并且记得在 Html 的顶部添加这个元标记,以减少<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 表格数据之间的空间使用margin属性或表格属性cellspacing


推荐阅读