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

Trigger the fire event on .click() except when text is being selected

I am currently working on a chat box project and I want the input field within the message area to automatically get focused when the user clicks anywhere in the chat box. However, I don't want this functionality to interfere with text selection for c ...

javascriptjqueryhtmlcss

Is it possible to incorporate vector graphics/icons by simply adding a class to a span element in HTML5?

In order to add a glyphicon icon to our webpage, we simply need to include its class within a span element, as demonstrated here: <span class="glyphicon glyphicon-search"></span> We also have a few files in .ai format that can be converted to ...

javascriptcsshtmltwitter-bootstrapglyphicons

Modifying the title of a webpage with a Bootstrap design

As a newcomer to HTML/CSS, I recently utilized a Bootstrap theme from Themezy to build my personal website. The template includes a navigation bar with tabs labeled Top, Work, Portfolio, and Contact. I felt the need to change Top to About, so I replaced ...

htmlcsstwitter-bootstrap

Creating a website with a seamless image background that fills the entire page

! Is it possible to achieve the same effect using AngularJS? Below is the CSS code: .bg { background: url(holiday-car-rental.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-s ...

htmlcss

Angular Recursive Bootstrap Breadcrumb Guide

I am looking to implement the bootstrap breadcrumb component (https://getbootstrap.com/docs/4.0/components/breadcrumb/) in my project. My goal is to use the breadcrumb to show the entire path to the current directory within a component that resembles a di ...

cssangularbootstrap-4

Custom control unable to display MP3 file

Hey, I came across this awesome button that I am really interested in using: https://css-tricks.com/making-pure-css-playpause-button/ I'm currently facing two issues with it. First, I can't seem to play the sound. I've placed the mp3 file ...

javascripthtmlcssmp3

Uninterrupted movement within a picture carousel

Seeking a way to create a smooth transition in an image slider with sliding dividers using continuous switching when clicking previous/next buttons. Currently, the dividers replace each other from far positions. Any ideas on achieving a seamless single mov ...

javascriptjqueryhtmlcss

Activate hover effect on desktop screen (excluding tablets and phones) by utilizing media queries

Applying hover state styling to a div can be done like this: div { &:hover { color: red !important; border: 3px solid red !important; } } To exclude iPads and other tablets from this CSS style, you can util ...

htmlcssipadlessmedia-queries

What is the most effective way to transfer a value from the server to a React user interface and incorporate it into the styling of the user interface?

Currently, I am utilizing Python as the backend for my React frontend. The backend is passing in values such as 17 or 87, and I aim to use these values as a percentage on the scale that I am constructing. Currently, the scale starts in the center: https:/ ...

cssreactjsfrontend

The CSS media query isn't functioning properly on Safari browser

Currently, I am working on a project using React JS and CSS. In order to make it responsive, I have implemented media queries. However, I have encountered an issue where the media query is not functioning properly in Safari browsers on both phones and PC ...

cssreactjssafariresponsive-designmedia-queries

Utilizing image backgrounds for hyperlinks in the Android browser

Encountering a minor issue with some <a> tags that have images as background, and the text inside the tags is indented using CSS. However, on the Android browser, part of the string used in HTML appears to cover the background image within the area o ...

htmlcssandroid-browser

The color of the text changes based on its alignment

Utilizing style sheets and attribute selectors, create styles that will change the color of text displayed on the page based on its alignment (e.g. left-aligned text in blue, right-aligned text in green). Additionally, text within h2 tags should have color ...

htmlcss

Ways to conditionally display a component in Next.js without the issue of caching CSS styles

I'm a newcomer to Next.js and I'm still trying to wrap my head around how the caching works. Let's take a look at this simplified example: An index page that displays either Test1 or Test2 components, based on whether the current minute is ...

csstypescriptcachingnext.js

A white background emerges when I select md-dropdown

Lately, I've been experiencing an issue on my website where a white background pops up whenever I click on a dropdown (md-select) in my form. Initially, it only happened with forms inside a modal, but now it's affecting dropdowns across the entir ...

javascriptcssangularjshtmlangular-material

Animation event in CSS3 fails to trigger on Firefox browser

Exploring the potential of CSS3 animation to detect when an input transitions from the enable to disable state, I encountered a challenge specifically in Firefox. Here is the code snippet that showcases the issue: View Demo on jsFiddle HTML: <input t ...

javascriptcssanimationfirefoxdom-events

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

Tips for aligning two divs vertically and horizontally next to each other

I'm struggling to center two divs both horizontally and vertically at the top of my page. I've tried various methods like "vertically align" & "margin: auto 0", but nothing seems to work. Can anyone help me figure out what I'm doing wron ...

htmlcss

Only one specific SVG tag is affected by the CSS stylesheet

I'm encountering an issue with my web page that has multiple SVG tags. Each SVG tag includes a block of style tags containing CSS styles for the respective SVG element. The problem is that these styles seem to leak into the overall global styles. For ...

csshtmlsvg

What is the most effective method to arrange absolute divs generated randomly in a grid-like formation?

Hey there! I'm facing an intriguing challenge with my app. It's designed to generate a variable number of divs which are always in absolute positioning. Unfortunately, making them relative is not an option due to some other factors within the app ...

javascripthtmlcss

What is the best way to create a stylish vertical line separating two divs stacked vertically?

I am trying to connect two divs that are positioned vertically with a clean and elegant vertical line. Although I attempted using the pipe (|) font, it did not produce the desired result. Can anyone provide guidance on how to create a more aesthetically pl ...

htmlcss