Reduce Button spaces in Table

Question

Reduce Button spaces in Table

Navigation

#1 by (1 votes)

1

Friends an Inquiry like I can make the table have less space, add a button to the table and enlarge the row I would like to have it less wide

This is the Button Code:

<td>
<div class="dropdown-inverse btn-sm dropdown open">
    <button class="btn btn-inverse btn-out-dotted btn-sm btn-out-dotted dropdown-toggle waves-effect waves-light " type="button" id="dropdown-7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Opciones</button>
    <div class="dropdown-menu" aria-labelledby="dropdown-7" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
        <a class="dropdown-item waves-light waves-effect" href="#">Cancelar</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item waves-light waves-effect" href="#">Renovar</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item waves-light waves-effect" href="#">Editar</a>
    </div>
</div>
</td>

bootstrap

asked by Victor Antonio Candela Buendia 21.11.2018 в 17:34

source

1 answer

Image with text over responsive with full width in the image with height 500px Doubt about repositories in Github

score 1 · Answer 1

From what I see you are using Materialize, this framework works by applying the attribute padding to the tags td and th of your table, by default they come like this:

td, th {
    padding: 15px 5px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    border-radius: 2px;
    }

Reduce the pixels in padding to decrease the space between the contents of the cell and the edge of it:

td, th {
    padding: 2px 5px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    border-radius: 2px;
    }

td, th {
    padding: 2px 5px!important;

<head>
 
  <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>            
  
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
  
</head>

<body>

   <table>
        <thead>
          <tr>
              <th>Name</th>
              <th>Item Name</th>
              <th>Item Price</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Alvin</td>
            <td>Eclair</td>
            <td>
<div class="dropdown-inverse btn-sm dropdown open">
    <button class="btn btn-inverse btn-out-dotted btn-sm btn-out-dotted dropdown-toggle waves-effect waves-light " type="button" id="dropdown-7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Opciones</button>
    <div class="dropdown-menu" aria-labelledby="dropdown-7" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
        <a class="dropdown-item waves-light waves-effect" href="#">Cancelar</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item waves-light waves-effect" href="#">Renovar</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item waves-light waves-effect" href="#">Editar</a>
    </div>
</div>
</td>
          </tr>
          <tr>
            <td>Alan</td>
            <td>Jellybean</td>
            <td>
<div class="dropdown-inverse btn-sm dropdown open">
    <button class="btn btn-inverse btn-out-dotted btn-sm btn-out-dotted dropdown-toggle waves-effect waves-light " type="button" id="dropdown-7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Opciones</button>
    <div class="dropdown-menu" aria-labelledby="dropdown-7" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
        <a class="dropdown-item waves-light waves-effect" href="#">Cancelar</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item waves-light waves-effect" href="#">Renovar</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item waves-light waves-effect" href="#">Editar</a>
    </div>
</div>
</td>
          </tr>
          <tr>
            <td>Jonathan</td>
            <td>Lollipop</td>
            <td>
<div class="dropdown-inverse btn-sm dropdown open">
    <button class="btn btn-inverse btn-out-dotted btn-sm btn-out-dotted dropdown-toggle waves-effect waves-light " type="button" id="dropdown-7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Opciones</button>
    <div class="dropdown-menu" aria-labelledby="dropdown-7" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
        <a class="dropdown-item waves-light waves-effect" href="#">Cancelar</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item waves-light waves-effect" href="#">Renovar</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item waves-light waves-effect" href="#">Editar</a>
    </div>
</div>
</td>
          </tr>
        </tbody>
      </table>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js'></script>

  

</body>

You could also use the cellpadding attribute within your table, but its use is not recommended for being obsolete .

You can see more information about the use in tables of the padding attribute in this link .