Adjust table cells in Bootstrap to content
-
02-01-2020 - |
Domanda
I have a table using Bootstrap, where the content of each table cell is a button. I want the width of each cell to be the width of the button plus margin. I tried resizing using <td class="col-md-1">
but this makes no difference.
Is there a way of resizing the width with Bootstrap?
This is the HTML:
<table class="table table-bordered">
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">1</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">2<br>ABC</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">3<br>DEF</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">4<br>GHI</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">5<br>JKL</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">6<br>MNO</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">7<br>PQRS</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">8<br>TUV</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">9<br>WXYZ</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs"><<br></button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">0<br></button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">Clr<br></button></td>
</tr>
Thanks
Soluzione
You can add a width to the table like this (assuming you add id="phone-table"
to your <table>
):
@media (min-width:767px) {
#phone-table{
width:20%;
}
}
@media (max-width:768px) {
#phone-table{
width:40%;
}
}
I used media queries so that the table maintains responsiveness and won't be too large or small on any screen.
Bootply Demo
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow