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.