Ensure that a span within a cell table has a height of 100%

Is there a way to have the span element expand to full height?

Click here

<table class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th class="shrink"></th>
            <th class="shrink">AAA</th>
            <th class="shrink">BBB</th>
            <th class="shrink">CCC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center"><span class="label label-default"><span class="glyphicon glyphicon-plus"></span></span></td>
            <td>1<br>1<br>1<br>1<br>1<br></td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td class="text-center"><span class="glyphicon glyphicon-plus"></span></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td class="text-center"><span class="glyphicon glyphicon-plus"></span></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
<table>

I've tried various methods but none seem to work. I need a simple solution such as setting the height to 100%.

Update: Desired outcome:

csstwitter-bootstrap

Answer №1

To easily expand the label width, you can use absolute positioning in relation to the parent td:

td {
    position: relative;
}
td > span.label {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
td > span.label:after {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

Check out the live example here: http://jsfiddle.net/e27wut2p/4/

Additionally, you can align an icon vertically inside the label using the span.label:after pseudo element.

Answer №2

In order to achieve dynamic positioning like that, it is necessary to make use of the position: absolute property. You can enhance this by utilizing the margin trick so that it does not have to span 100% width (similar to what is shown in your image). Does this align more closely with what you are trying to accomplish?

.table > tbody > tr > td:first-child {
    position: relative;
}

.table > tbody > tr > td:first-child span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 2em;
    height: 85%;
}

.table > tbody > tr > td:first-child span.glyphicon {
    height: 2em;
    line-height: 2em;
}

http://jsfiddle.net/4LstLagu/

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

Assignment of Microsoft Avatar Colors

What method does Microsoft utilize to assign colors to contacts in their applications? I've searched online with no luck in finding an answer. In programs like Outlook or Android, when a new contact is added without an image for the avatar, Microsof ...

androidhtmlcssoutlookangular-material

Adding JQuery to a running webpage using the DOM and Opera browser add-ons

I'm currently working on an Opera Extension and I have a question. Is there a way to use the includes folder in order to directly inject jQuery into the live HTML of a webpage? For example, can I change the background color of the DOM to black? If ...

javascriptjqueryhtmlcssopera

Is there a way to occupy the extra space while working with an inline unordered list?

Using this unique CSS code, I've managed to give my unordered lists a touch of elegance: ul, li { padding: 0px; margin-left: 0px; margin-bottom: 0px; display: inline; } li { border: solid 1px #333333; margin-right: 5px; padding: 2p ...

htmlcss

Make HTML design responsive to any screen size

After completing the design of a mobile app interface with dimensions 750w by 1334H, I encountered an issue where it appears too large on the app testing screen. I am seeking a way to automatically adjust the design to fit all screens without compromising ...

htmlcss

Position the text to the right of the div or image and allow

My attempt to align the lorem ipsum sample text next to the image and div container by setting the float to right has not been successful. The text still remains below the image. Click here for visual reference Appreciate any help in advance. #outer { ...

htmlcss

Adding HTML elements to a button using an array: a step-by-step guide

In the process of developing a web application feature using JavaScript, I have come up with a simple plan: Place a button in the bottom left corner. The button should only become visible after scrolling begins. Upon clicking the button, a new window wil ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a responsive slider in CSS that matches this specific design

Looking to create a responsive sidebar based on this specific design Link to design on Figma Key focus is implementing the "< 4/12 >" functionality and ensuring it is responsive Current code can be found here: Code on JSFiddle enter code ...

htmlcssreactjsvue.jsresponsive

Creating a container that scrolls horizontally

I am working with ngbootstrap and angular, however, I believe the issue at hand is more related to html/css. My goal is to create a container that scrolls horizontally, despite coming across several helpful threads on this topic, I am struggling to impleme ...

htmlcssng-bootstrap

Is there a way to adjust the image dimensions when clicked and then revert it to its original size using JavaScript?

Is there a way to make an image in an HTML file change size by 50% and then toggle back to its normal size on a second click using JavaScript? I've attempted to do it similar to the onmouseover function, but it doesn't seem to be working. Any sug ...

javascripthtmlcsstogglegetelementsbytagname

Drop-down menu for every individual cell within the tabular data

I'm working with a large HTML table that looks like this: <table> <tr> <td>value1</td> <td>value2</td> </tr> <tr> <td>value3</td> <td>value4 ...

javascripthtmlcss

Having trouble with clearing divs function not working as expected

I'm facing a challenge in properly aligning 3 div elements without resorting to adding padding at the bottom of the wrapping div, which isn't the most practical solution. Check out the issue demo here How would you suggest addressing this parti ...

htmlcss

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

javascriptcssangularjsdom

Executing a code inside a jQuery modal element

I am utilizing a jquery plugin called jQuery Image Scale to automatically resize individual images on my website. Below is a simple example: // HTML: <div class='parent_container'> <img src='image.jpg' class=&apos ...

jqueryhtmlcss

Scrolling animations do not support the Translate3d feature

I'm struggling to implement a smooth scroll effect on the header of my website. My approach involves using transform:translate3d for animation, with the goal of keeping the header fixed at the top and moving it out of view as the user scrolls down. I ...

jquerycss

Toggle class to a div upon clicking menu item

Seeking assistance with jQuery to develop a video player featuring a sub menu for displaying various content options upon selection. Here is a snapshot of the frontend design: view image Upon clicking on 'video' or 'audio', a distinct ...

javascriptjqueryhtmlcss

Expanding the width of a Datatables within a Bootstrap modal

While working on my modal, I encountered an issue with the width of Datatables. Despite trying to adjust it to fit the modal size, it appears like this: Below is the jQuery code calling the Datatables: function retrieveTags(){ var identifier = $(&a ...

javascriptjqueryhtmltwitter-bootstrapdatatables

What are some ways to expand the width of a MaterialUI form control if no value has been chosen?

I am currently working on a project where I need a dropdown menu component with specific selections. However, the layout appears to be cramped and I'm struggling to adjust the width. Additionally, I've been unsuccessful in changing the font size ...

htmlcssreactjstypescriptmaterial-ui

Adjusting background image positioning for different screen sizes

Can anyone help me figure out how to adjust my CSS so that when my device screen is small, a specific section of the background image is displayed instead of just the center? Here is how my background image is currently set: background-image: url(*.jpg); ...

htmlcssresizebackground-imagedevice

Reveal unseen information on the webpage upon clicking a link

I have successfully implemented a fixed header and footer on my webpage. The goal is to make it so that when a user clicks on a link in either the header or footer, the content of that page should appear dynamically. While I have explored various styles, ...

javascriptjqueryhtmlcss

Unique Floating Bullet Icons Ascending When Enlarged

I'm currently trying to use a star image as a custom bullet point on an <li> element. However, I'm facing the issue where the bottom of the image aligns with the font's baseline, causing the image to be pushed upwards. Is there any sol ...

htmlcsscss-float