Customize the size of table cells in Bootstrap to fit the content

I am working on a table with Bootstrap where each cell contains a button element. I am trying to adjust the width of each cell to accommodate the button and margin, but using <td class="col-md-1"> doesn't seem to make any difference.

Is there a way to resize the width effectively using Bootstrap?

Here is the HTML code:

   <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">&lt;<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>

Thank you

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

To adjust the width of the table, you can define it as follows (assuming you include id="phone-table" in your <table>):

@media (min-width:767px) {
  #phone-table{
      width:20%;
  }
}
@media (max-width:768px) {
  #phone-table{
      width:40%;
  }
}

I implemented media queries to ensure that the table remains responsive and properly sized on different screen sizes.

View Bootply Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I prevent StateHasChanged() from affecting all open browsers in a Blazor Server-Side application?

Hey there, I'm new to Blazor but familiar with C#. This is my first time asking a question here so please bear with me. :) I am working on a Blazor server-side application where users can enter information and validate it based on server data. So far ...

c#htmlasync-awaitblazorblazor-server-side

I aim to toggle the visibility of input fields upon clicking a button

Form.html <form [formGroup]="myForm"> <ion-button [(ngModel)]="isActive"(click)="onClick()" >Add</ion-button> <ion-item> <ion-label position="floating">First Name</ion-label&g ...

htmlcssangularionic-frameworkionic4

Retrieve the value of a TextBox and display it as the title of a Tool

Hello there, I am currently learning front-end technologies and have a question. I would like to retrieve the value of a TextBox and display it in a Tool-tip. The code for the TextBox has a maximum length of 30 characters, but the area of the TextBox is no ...

javascripthtmlreactjstextboxtooltip

JavaScript - Receiving alert - AC_RunActiveContent.js needed for this page to function

When I attempt to open the HTML file in my application, a pop-up message appears stating that "This page requires AC_RunActiveContent.js." However, I have already imported and referenced the AC_RunActiveContent.js file in my package. Can someone assist m ...

javajavascripthtmljsp

Center column with header and footer flanking each side

Trying to replicate the layout of the Facebook Android app on my page. The app features a 3 column design, with the central column exclusively displaying the header (no footer included, although I require one for my version). This visual representation is ...

javascriptjqueryhtmlcss

Retrieve the erased document using Google's cache feature

After accidentally overwriting my .php web document file with an old version, I attempted to access the cached copy on Google. The only thing I could find was the HTML scripts, as the PHP coding was not visible. Now I am seeking a method to recover the e ...

phphtml

Personalized dropdown appearance

During my work on a select box, I discovered that custom styling is not possible. I attempted to use some plugins but did not find one that met my needs. I am seeking a dropdown menu with options in both black and gray, similar to this template but using ...

javascriptjqueryhtmlcss

Django does not support running JavaScript natively

Wondering how to incorporate JavaScript into Django for creating chained forms? My first step was simply trying to understand how to run JavaScript. I've placed a basic main.js file in the static folder. I included a link to main.js in the header of ...

javascripthtmldjango

Calculating the calc()-expression in Fluid Typography Linear Transition

After exploring the technique demonstrated by Mike Riethmuller, which involves utilizing calc() to create a fluid font-size transition between a minimum and maximum value, I found the outcome obtained from calc() in the browser somewhat perplexing (and not ...

cssfont-sizetypographycss-calc

When trying to set the focus on the first item in a list using HTML and Angular, the focus unexpectedly shifts to the second

I've been tackling a UI requirement where the focus needs to be set on the first element of a list item constructed from an array of objects when the tab key is pressed for the first time. Subsequent tab key presses should cycle through the list items ...

htmlangulartypescripttabindex

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

I have been working on a code that involves multiple scrollbars that are all linked together. When you move one scrollbar, the other two will move proportionally. However, due to differences in width, the scroller doesn't always reach the end of the s ...

javascripthtmlcss

Duplication of elements in a Meteor and React environment

When it comes to creating a basic Meteor app with React, this is the structure I have put in place: <head> <title>test</title> </head> <body> <div id="render-target"></div> </body> Here is the start ...

htmlmeteorreactjs

Collapsing borders in JavaFX 8

Hey there! I'm having a little issue with JavaFX 8 components. I'm trying to make them sit next to each other with borders, but it's not quite working out. Is there a way to make them blend together and share one border? import javafx.geome ...

javacssuser-interfacejavafx

What are the steps to ensure a form does not trigger the action URL and instead only prints the data upon submission

Currently, I am working on creating a form that will submit without opening the action URL when a button is clicked. Additionally, after submission, I want to display a message and clear the form. Can anyone guide me on how to achieve this? <form id="c ...

javascriptphphtmlforms

Linking Background Images in HTML

Is there anyone who can provide assistance with this question? I am looking for a solution where I can have a link with a background image, placed in a row within a table. Your help would be greatly appreciated. Thank you ...

htmlcssimage

Is it possible to incorporate a label within a dropdown menu (<select>)?

How can I add a label inside a select box using Bootstrap? Here is an example: Before selecting an option After selecting an option, the label should appear in a small size like this: After selecting an option : <div class="form-group"> & ...

javascripthtmlcssbootstrap-4

Creating a carousel similar to the one on Skipperlimited's website can be achieved

I am working on a project and I would like to create a design similar to the one found at Specifically, I am interested in replicating the carousel of images and the rotating carousel within their logo. Can anyone provide guidance or suggestions on how to ...

jqueryhtmlcssbootstrap-4

Enhance the functionality of a directive by incorporating the ui-mask directive

Recently, I implemented a custom directive for an input field that adds a calendar icon with a datepicker to the input. I have used this directive in various sections of my application and now I am interested in incorporating ui-mask - another directive I ...

javascriptangularjshtmlangularjs-directive

Encountering unexpected behavior with the .data() method

I'm encountering an issue with my code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv= ...

javascriptjqueryhtmlcssattr

Ways to Activate a Modal Using a Hyperlink

One of the features on my Next.js page is a modal that can be triggered by clicking a button: <button type='button' onClick={() => setOpen(true)}> The modal component looks like this: <Modal id='demo' show={isOpen} on ...

htmlurlnext.jsmodal-dialogpopup