2

introducir la descripción de la imagen aquí

Amigos una Consulta como Puedo hacer que la tabla tengo menos espacio, agrege un boton a la tabla y se agranda el row quisiera tenerlo menos ancho

Este es el Codigo del Boton:

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

1 respuesta 1

3

Por lo que veo estás utilizando Materialize, este framework trabaja aplicando el atributo padding a las etiquetas td y th de tu tabla, por defecto vienen así:

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

Reduce los pixeles en padding para disminuir el espacio entre el contenido de la celda y el borde de la misma:

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>

También podrías usar el atributo cellpadding dentro de tu tabla, pero no se recomienda su uso por ser obsoleto.

Puedes ver más información sobre el uso en tablas del atributo padding en este enlace.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.