Setting the height of a span element to 100% within a table using

I have a table with some content inside. One of the elements is an 

<a class="available">available</a>
, but it doesn't fill the entire row of the table.

Here is the HTML code:

<table with="100%" class="list_table">
<tbody>
<tr>
<td><a class="available">Available</a></td>
<td><a class="booked"><span>Nose to mouth</span><span>Frown Lines</span></a></td>
</tr>
</tbody>
</table>

And here is the CSS code:

.list_table thead th, .list_table tbody td { border:1px solid #D3D9CB;  font-size:12px; position:relative !important;}
.available { background:#98AEB3; display:block; height:100%;}
.booked { background:#F2AE30; }

An image is also attached for reference.

htmlcsshtml-table

Answer №1

A as well as SPAN are inline elements, which is why specifying width and height for them may not be ideal. Moreover, setting the height to 100% may not render consistently across various browsers.
If your goal is simply to alter the background color of the cell content, it might be better to assign the classes .available and .booked to the TD element instead of the A tag.

Answer №2

in case

.available { background:#98AEB3; display:block; height:100%;padding:0;margin:0;}

If that doesn't solve the issue, consider including:

.available { background:#98AEB3; display:block; height:100%;line-height:18px;}

Experiment with adjusting the line-height value in pixels to fine-tune it, should do the trick.

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 do I center an SVG vertically inside a button using Bootstrap 5?

Is there a way to center the SVG vertically within the button while using Bootstrap for styling? <a href="#home" class="navbar-home"> <button type="button" class="btn btn-outline-warning"> & ...

htmlcssbootstrap-5

Aligning two identical components within the same container when triggered by a single click

Currently, I am exploring Angular 2 and Typescript and have been developing a pager component for a table. The pager functions correctly, but I have encountered an issue with having two pagers - one above the table and one below it. When the next button on ...

htmlangulartypescriptcomponents

Tips for inserting a line break in a script

Hello, I need some assistance with creating a typewriter effect using JS, CSS, and HTML. Everything seems to be working fine except when I try to add a new line of text, it doesn't display properly. var str = "<p>I want to put text here then ...

javascripthtmlcss

The data table is malfunctioning and unable to filter data properly

After implementing the data table code, I encountered an error when trying to use the search filter table functionality. if($("#newuser").length != 0) { var oTable = $("#newuser").DataTable({ "processing": true, "serverSide": true, ...

javascriptphphtmlcodeigniter

Personalized radio button tags

Is there a way to ensure that all blocks are uniform in size with a 10px margin between them? Recently, the radio button was swapped out for a radio label, but now there is an issue with inconsistent sizes due to varying word lengths. How can this be res ...

htmlcsselementor

Using ng-class in AngularJS, you can pass a class name to apply to an

I currently have the following code: <tr ng-class="{{line.color}}" ng-repeat="line in gameRank | orderBy: sortType: sortReverse"> <td>{{$index + 1}}</td> <td>{{line.username}}</td> <td>{{line.games}}</td& ...

javascriptcssangularjsng-class

Adjust the header's alignment to seamlessly coincide with the uppermost part of the

I'm encountering this peculiar issue with a website I recently started designing. My aim is to make the header perfectly aligned with the top of the page. However, despite my attempts, there persists a stubborn gap that measures around 20px, defying a ...

htmlcss

Utilizing AJAX to transmit information to the database through a query

I have a form on my HTML page that I want to send to a PHP page using AJAX. It looks like the AJAX part is working, as I can see that it reacts when the button is clicked. However, the PHP page is not receiving the form content because nothing seems to be ...

phphtmlajax

Maintain the initial spacing when altering the font weight

Two divs were created with padding in each one. div { display:inline; background-color:yellow; padding: 2px 2px 2px 2px; } div:hover { font-weight:bold; } <body style="font:15px arial,sans-serif;"> <div>one</div> <div& ...

htmlcss

Switching Between HTML Using Javascript

I am currently working on an app that allows users to easily check the local weather and temperature in either celsius or fahrenheit. However, I've encountered a problem when trying to switch between the two unit types by simply clicking on the temper ...

javascriptjqueryhtml

Reconstructing tables using jQuery

Let's work with the following table: <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> ...

jqueryhtml-table

What could be causing the spinner (Bootstrap 5.x) to not show up on the screen

I'm having trouble getting a spinner to show up when a user clicks a form submit button. Below is the HTML code to add a <div> for the spinner: <div class="pageloader"> <img src="../images/loader-large.gif" alt ...

cssjquery-uibootstrap-5

Ways to eliminate the default margin surrounding an image within a div

Struggling with CSS while building websites is a common issue for me. In my current project, I have encountered a challenge where I placed two images inside a div container. Oddly enough, when I add text to the div, it adjusts its height accordingly. How ...

htmlcssimage

Guide to embedding CSS into a DOC file generated from HTML with PHP

I've created a document, but it's not linking to the external CSS file. I have added .css files in my code, but when I generate the document, it doesn't apply the CSS classes. Here is my code: <?php header("Content-type: application/vn ...

phphtmlcssdoc

What methods are available to load sections of a complex SVG shape asynchronously?

I'm currently in the process of creating a website with a geographic map built using SVG, pulling data from OpenStreetMap. Due to its large size and potential for transformations such as zooming and moving, only a portion of it will be visible on the ...

javascripthtmlcsssvgcatiledlayer

Ensure all image tags have a specific class assigned if one is not already present

In my current project using Nette PHP (although the specific framework isn't crucial), I am faced with the task of replacing certain parts of HTML with new content. The requirement is that if an image tag has a 'class=' attribute, it should ...

phphtml

How to change the display property in CSS from block to none using React

Just started diving into React, and I am struggling with making the content disappear when clicking a button. Tried using state and even checked out https://jsfiddle.net/uwadhwnr/, but nothing seems to work. Feeling quite frustrated at the moment. <div ...

cssreactjs

Is there a way to delete content in HTML after a particular text using Python and BeautifulSoup4?

I am currently in the process of scraping information from Wikipedia. My goal is to extract only the necessary data and filter out any irrelevant content such as See also, References, etc. <h2> <span class="mw-headline" id="See ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

How come my div isn't updating its color in Internet Explorer?

Having trouble with the following scenario in IE. Styles: .tabmenu { background-color: #990000; display: inline-block; width: 150px; position: relative; left: 59%; border-top-left-radius: 10em; margin-bottom: -8px; min-wi ...

javascriptjquerycsshtmlinternet-explorer

Implement a sliding effect to the horizontal scrolling mechanism

Recently, I developed a straightforward horizontal scroll system. You can check out an example of my work on JSFIDDLE: http://jsfiddle.net/marcus_derem/qn603h8b/133/ The Goal: I am aiming to scroll to a container's child using the following code: ...

javascripthtmlcssscrollview