Remove padding in Twitter Bootstrap table cells

One of my current projects requires making a button that fills the entire width and height of the TD element. I have attempted setting the normal .btn-warning with -Xpx!important, but it did not produce the desired result.

Here is what I currently have:

However, this is what I am aiming for:

The code snippet I am using is as follows:

<tbody>                                                         
<tr>
<td class="td-btn"><a href="#" class="btn-sm btn btn-warning"><span class="glyphicon glyphicon-ok"></span></a></td>
<td><a href="#">Projectnaam</a></td>    
</tr>
</tbody>

If anyone knows how to achieve a button that spans the full width/height of the TD element without any additional spacing, please share your insights!

Answer №1

A friend of mine offered some assistance:

<td style="padding: 0px;">
<a href="#" class="btn-sm btn btn-success" style="height: 44px;padding: 12px 10px;">
<span class="glyphicon glyphicon-ok"></span>
</a>
</td>

It's pretty close to what I had in mind =). Much appreciated to everyone who contributed.

Answer №2

.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>tbody>tr>td,
.table-condensed>tfoot>tr>td {
    padding: 5px;
}

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

Identifying collisions or contact between HTML elements with Angular 4

I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...

Expansive visuals with the Masonry plugin

Looking to create a Masonry layout with images but running into the issue of large image sizes. Wanting to limit each image to 30% of the screen width while maintaining proportionate height. How do websites like Flickr and Pinterest handle this when uplo ...

Retrieving text content within a span element using CSS

Here is the Jsfiddle that I experimented with http://jsfiddle.net/LpH8B/2/ <span>*</span> <br> <span>*</span> <br> <span>hdhdf</span> span[text='*'] { color:red; } I am looking to target ...

Modify top position without affecting bottom alignment using CSS

I am currently working on a website that is designed to mimic a printable document. The layout consists of a header, body, and footer, with each element utilizing CSS for margin and height adjustments. The challenge lies in ensuring that the footer is alw ...

Tips for making content vanish or remain concealed behind a see-through header during page scrolling

I made a JavaScript fiddle http://jsfiddle.net/claireC/8SUmn/ showcasing a fixed transparent header. As I scroll, the text scrolls up behind it. How can I make the text disappear or be hidden behind the transparent div when scrolling? Edit: I should also ...

Tips for creating a scrolling animation effect with images

I'm currently attempting to create an animation on an image using HTML/CSS. The issue I'm facing is that the animation triggers upon page load, but I would like it to activate when scrolling down to the image. Below is my snippet of HTML: <fi ...

I am looking to display an image as a value in the dropdown menu of my Contact Form 7 on my WordPress website

I am currently working on a Wordpress website where I have a page showcasing 50 different company logos. Below the logo section, there is a form created using Contact Form 7. The logo section was built using a combination of HTML and CSS. Within the form ...

Craft a unique parallax effect using Framer Motion's clipping feature

To help visualize my concept, I have sketched it out using Figma. This idea involves a slide transitioning between pages. The goal is to cover the entire page with a sliding effect, and then place a sticker (dubbed the Parallax Box) on top of it. However ...

What causes the slight shifting of on-screen elements when the doctype is removed from an HTML document?

During the process of converting from HTML4 to HTML5, I compared my html4 and html5 pages and noticed that removing deprecated elements after the doctype declaration was causing slight movements in on-screen elements. For example, in the code snippet below ...

What is the best way to utilize the sx prop in Material UI for applying styles specifically when the component is active or selected?

In the code snippet below, I have set up the useState hook so that when a ListItem is clicked on, the selected state becomes true. My goal is to apply specific styling when an item is selected using the sx prop instead of creating a styled component for su ...

Having difficulty sending emails with attachments using AngularJS

While using Angular, I encountered an issue when sending an email with an attachment. The response I received contained the data code of the file instead of its actual format. See example: https://i.stack.imgur.com/vk7X8.png I am unsure what is causing t ...

Align the text to the right within a display flex container

Below is the code snippet: <div className="listContent"> <div> <div className="titleAndCounterBox"> <div className="headerListTitle">{list.name}</div><br /> <div ...

The border bottom effect in Hover.css is malfunctioning when used in the Opera browser

I've implemented a hover effect using hover.css that works perfectly in all browsers except Opera. Surprisingly, the effect only seems to work in Opera when I remove the following properties: -webkit-transform: perspective(1px) translateZ(0); transf ...

Styling a Pie or Doughnut Chart with CSS

I am working on creating a doughnut chart with rounded segments using Recharts, and I want it to end up looking similar to this: Although I have come close to achieving the desired result, I am encountering some issues: Firstly, the first segment is over ...

Experiencing blank areas when I try to minimize the screen while using Chrome

While using Chrome, my webpage looks perfect in normal mode. However, when I minimize the screen, white space appears at the bottom and some content gets hidden. The page is built using reactjs, html, and css. Interestingly, it works fine for IE in both no ...

Using jQuery to automatically scroll to the bottom of a div when sliding down

When a user clicks on a link to slide the div down, I want it to automatically scroll to the bottom of the div. I've attempted to use scrollTo and animate methods to achieve this effect. $('html, body').animate({ scrollTop: $("#elementID") ...

Tips for changing the state of a toggle button with JavaScript

I need help creating a toggle button. To see the code I'm working on, click here. In my JavaScript code, I am reading the value of a 'checkbox'. If the value is true, I add another div with a close button. When the close button is clicked, ...

Feeling trapped during the process of setting up a intricate jQuery Image Slider

I've hit a roadblock while trying to make changes to the slider located at THIS URL. In the current setup, each thumbnail corresponds to one main display image. Clicking on a thumbnail displays a single image and then proceeds to slide to the next th ...

The downside Div is being displaced by a Paragraph with an overflow-y:scroll property

In my Div, I have set the width and height of a paragraph along with the property overflow-y:scroll. It's working fine as the paragraph is displaying with a vertical scroll. However, it is causing displacement in the div below. Below is the HTML code ...

Remain concealed once the lights dim

Looking for a way to fade out a logo in a preloader div after a call, but having issues with it becoming visible again once fully faded out. Ideally, I would like to keep it faded out or set it to display none using only CSS, although I can use jQuery if n ...