CODEWITHSUNDEEP
htmlcss
user13523236
user13523236

Reputation: 135

define table row space

how to define table space?

enter image description here

I want to make the space smaller and my icons do not disappear, also have a problem, having a small screen my icons are hidden

enter image description here

enter image description here

I need to keep the size of my icons when having the small screen, help pls

<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>

Upvotes: 1

Views: 185

Answers (2)

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

Use the CSS media queries to determine your icon's size when you the screen size decreases, and also remember to add this meta tag at the top of your Html

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

also the to decrease the space between your table data use margin property or the table attribute cellspacing

Upvotes: 1

Divya Chauhan
Divya Chauhan

Reputation: 11

you can do something like this as it will help to create all the images in 1 row and help you to scroll if you will add more images:


<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="scrollmenu">
    <img src="https://i.imgur.com/RquOiuK.png" style="width:20%;height:30%;">

    <img src="https://i.imgur.com/RquOiuK.png" style="width:20%;height:30%;">

    <img src="https://i.imgur.com/RquOiuK.png" style="width:20%;height:30%;">

    <img src="https://i.imgur.com/RquOiuK.png" style="width:20%;height:30%;">

    <img src="https://i.imgur.com/RquOiuK.png" style="width:20%;height:30%;">

    <img src="https://i.imgur.com/RquOiuK.png" style="width:20%;height:30%;">



  </div>
</div>


img{
height: 0.25rem;
font-size: 3.75em;
}
div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

here is the link of my sample: you can check here

Upvotes: 0

Related Questions