In need of a solution for this peculiar problem with an html table and css. Let's

Encountering an unusual issue with my table content

.table {
   position:absolute;
   top:12px;
   left:3px;
   width:87px;
   height:74px;
}

.table tr {
  vertical-align:middle;
}

.table td {
  text-align:center;
  padding:1px;color:#000000;
  font-size:1em;
  line-height:1.5em; 
  width: 50px;
}

.table td span {
  padding:3px 5px;
  font-size:1em;   
  background-color:yellow;
}

HTML

<table class="table" cellpadding="0" cellspacing="0">
 <tbody>
   <tr>
     <td><span>example 1</span>
     </td>
   </tr>
 </tbody>
</table>

Trying to set a white background for the text inside span, without extending it to only the edge of the texts by applying padding.

Some texts end up inside the background, while others don't.

for example
some texts are like these...
 -------
|example|
 -------

or 

 --------
| example|
 --------


This is what I want.
 ---------
| example |
 ---------

Increased the width of td, span and tr but still facing issues.

htmlcsshtml-table

Answer №1

To solve the issue, try adding display: inline-block; to your span.

While span is typically an inline element, you can still apply padding to it without any problems. The problem arises when the text inside the span exceeds the width of the containing elements like table and td. This causes the text to flow onto the next line. By setting display: inline-block;, you can prevent this wrapping behavior. Alternatively, you can adjust the widths of your table and td to accommodate more text on a single line.

If you observed what seemed like "missing" padding on certain sides of the span, it's likely due to a line-break rather than actual absence of padding. To address this, you can also use white-space: nowrap; on the span to prevent text from wrapping to the next line.

Answer №2

The issue lies in the default setting of the span element, which is display:inline. Since inline elements cannot be sized and always wrap their content, changing the display property to inline-block allows the span to behave like a mix between inline (can be stacked horizontally) and block (can be sized). This change enables the span to fill its container horizontally, resolving the problem.

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

Displaying two images side by side in HTML using Bootstrap

As a beginner in HTML, I am faced with the challenge of placing two images of different sizes side by side on the same row using HTML and Bootstrap. Below is my current code: <div class="row"> <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6"> ...

jqueryhtmlcsstwitter-bootstrap

Saving several inputs with incremented values

I'm facing an issue with saving data from multiple input fields in a for loop: <input type="number" name="device_id_1"> <input type="number" name="device_id_2"> ... <input type="number" name="name_1"> <input type="number" name="n ...

phphtmllaraveleloquent

Maintain a consistent size for the material UI drawer, preventing it from resizing when the content size fluctuates

Incorporating Material UI into my project, I decided to use a drawer for navigation. However, within the drawer, there are Collapsible lists that expand when clicked. The issue arises when the list text items are lengthy, causing the drawer to unexpectedly ...

cssreactjsmaterial-uidrawer

Utilizing the Masonry jQuery plugin for optimizing empty spaces

Recently, I came across the Masonry plugin and I'm considering using it in a project. One question that intrigues me is whether there is a way to detect empty spaces that occasionally show up in the layout when divs are positioned. Being able to ident ...

javascriptjqueryhtmlcssjquery-masonry

Hovering Div Troubles

I've been working on creating a hover effect for the blocks on my website. Everything was going smoothly until I reached the last block. The hover effect appears to be displaced, as shown in this sample link. Although the CSS code I'm using seem ...

htmlcss

Content that can be scrolled within a React.Box container

I am struggling with a particular view. The columnBox I have can potentially hold a large number of items, but for some reason it's not scrolling in the view. I've already tried setting overflowY to auto, but since I don't know the exact hei ...

htmlreactjsmaterial-ui

Can you explain the significance of the "row" class in Bootstrap, how it differs from containers, and how it interacts with col-***-*?

I've been browsing through the guide found at http://getbootstrap.com/css/ and I'm having trouble grasping the purpose of the "row" class. I experimented with some examples provided in the guide like: <div class="row"> <div class="c ...

htmlcsstwitter-bootstraprow

What is the most effective method for tracking file upload progress using SSE?

I am currently working on creating a file upload progress feature that is compatible with older browsers using AJAX. In HTML5, there is the xhr.upload.progress event which works well for modern browsers, but I need an alternative for non-XHR2 browsers. I h ...

ajaxhtmlfile-uploadprogressserver-sent-events

It appears that the font in style.css is not being updated properly and seems to resemble

My issue lies within my CSS code. The text on my website is not displaying correctly and seems to be ignoring the styling that I have applied. Even though I have used similar styling on other buttons which look fine, this specific text element is causing p ...

javascripthtmlcssstyles

Appending a row to a table will not trigger events in Select2

Despite several attempts, I can't seem to get the select2:select event working on dynamically added rows in a table using select2. The event only works on the original row. Unfortunately, I don't have any additional details about this issue. COD ...

javascriptjqueryhtmllaraveljquery-select2

Attempting to save MongoDB data into a variable for integration with Handlebars.js

Having an issue with storing MongoDB data in a variable to display in HTML using hbs. The specific error message is TypeError: Cannot read property 'collection' of undefined. Here's the code snippet I have written: const express = require(& ...

javascripthtmlnode.jsmongodbhandlebars.js

When implementing CSS, the background image in the header section of my webpage is not visible to me

I'm currently working on a basic webpage and encountering an issue with setting an image as the background for my header section. Despite using what I believe to be the correct code in the CSS section, specifying the right path and file name for the i ...

htmlcss

Differentiating the appearance of an HTML datalist with color alterations

Is there a way to customize the color of the datalist element (black box shown in the image)? https://i.stack.imgur.com/GGJQ3.png https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist EDIT: The default color is set by the system, although ...

htmlcss

Tips for defining a relative path in the base URL with AngularJS

Encountering an issue with AngularJS routes related to file paths. The folder structure is as follows: js -> Angular -> css -> Bootstrap -> index.html Routes work fine when hosted on a server like IIS. However, copying and pasting the direct ...

javascripthtmlcssangularjs

Why is it that the date selector is missing in Firefox?

When using the provided HTML code, a date selector will appear on Google Chrome: <html> <head> <title> </title> </head> <body> <form> <input type="date" /> </form> </body> However, ...

htmlgoogle-chromefirefoxdatepicker

How can I resolve the issue of not returning anything ondrop in my code?

Whenever I drop my div containing an image, I don't see anything. And when I try to access its ID, I get a null value. How can I extract information from a div with an image and append a row with it? For code samples or to check the codepen example, v ...

javascripthtmlsassdrag-and-dropdata-transfer

"Enhabling tablesorter pagination to ensure that buttons always stay in sync with

I am experiencing an issue with the pagination buttons staying at the bottom of my page, even when there are only 2 entries left on the last page. Check out my table here: Is there a way to make the pagination buttons dynamically move to the top based on ...

javascriptjquerycsstablesorter

Can changes on a webpage in PHP be saved without needing to be sent to a database?

I've been conducting some research on this matter, but I haven't been able to find a solution. Is it feasible in PHP to save modifications made on a webpage without storing the information in a database? I want to empower users to edit their pag ...

phphtml

Retrieve the API array index by checking the value of the 'Name' field

I am looking to compare the name of a button I click on with an array in order to find the matching name and then select the corresponding array number. Currently, I have a For loop that retrieves information from every team in the array, but I only requi ...

javascripthtmljqueryapidom

Struggling with smoothly transitioning an image into view using CSS and JavaScript

I'm currently experimenting with creating a cool effect on my website where an image fades in and moves up as the user scrolls it into view. I've included the code I have so far below, but unfortunately, I keep getting a 404 error when trying to ...

javascripthtmlcssgetboundingclientrect