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

The execution of jQuery code from PHP using $.ajax is not functioning properly

I am attempting to run a jQuery code from a PHP page using AJAX. Modify the HTML of div.error Here is the code (Let me know if there is a simpler method): - no $.load HTML/jQuery: jquery.js already loaded <input type='text' id='test&a ...

phpjqueryhtml

Modify the color or background color of a disabled Material UI checkbox

The disabled unchecked checkbox appears too subtle to me, and I would like to enhance it by giving it a grey background and changing the cursor style to not-allowed. I've been trying to implement these styles on the checkbox using the makeStyles, but ...

javascriptcssreactjsmaterial-uimakestyles

Tips for centering Font Awesome icons in your design:

I'm struggling to align the font awesome icons with a lower text section in the center. Here is the HTML code snippet: .education-title { font-family: Alef, Arial, Helvetica, sans-serif; text-align: center; font-size: 1.5em; } .edu-co ...

htmlcssfont-awesome

Columns that can be resized in a right-to-left (

Whenever I use RTL, the columns behave erratically when resizing... I have implemented colResizable. You can see an example here: http://jsfiddle.net/r0rfrhb7/ $("#nonFixedSample").colResizable({ fixed: false, liveDrag: true, gripInnerHtml: "<d ...

javascripthtmlcss

The mystery of the unassigned value in $(this).data(value) when using the jQuery click() method

In my Rails 5 application, I am working on creating a dynamic menu that will guide users to different parts of the site based on their location. The idea is that when they click on a specific menu item from the home page, a modal will appear allowing them ...

javascriptjqueryhtml

html: div broken

The HTML document reads as follows: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"& ...

csshtmlfirebug

A pop-up window for selecting a file within an <a> tag

Is there a way to create an Open File dialog box on a link within my webpage? I attempted <input name="uploadedfile" type="file"> However, it only functions as a button and does not allow for the selection of multiple files. I would like somethin ...

javascripthtml

Creating a drawImg function on the HTML/JavaScript canvas

Attempting to duplicate a specified section of an image onto a canvas below, but finding that the mirrored section is resizing unexpectedly. For example, if given a map image and trying to replicate a building from it exactly below, why does the mirrored s ...

javascripthtmlhtml5-canvas

Retrieve user choices from dropdown menu with Flask and HTML

I'm currently working on developing a dropdown list in HTML that, upon selection submission, will pass the chosen option to a Python script to dynamically update the content of the HTML page. While I have successfully implemented the dropdown list, I ...

pythonhtmlflask

A plug-in for TinyMCE that allows users to adjust column widths within a table

We utilize TinyMCE in our content management system (CMS), and our users have expressed interest in being able to adjust the width of a column within a table. While HTML technically does not recognize columns, the Moodle editor HTMLAREA includes a plugin t ...

javascripthtmltinymce

Using JSON within HTML: A guide to sanitizing stringified objects

Is there a way to improve the readability of a string that looks like an object but is actually just a string? It currently does not look very nice and easy to read. Using JSON.parse doesn't work because not every element in the string meets the requi ...

htmljson

I'm currently utilizing CSS GRID to create a map layout, but I'm encountering an issue where the layout is not filling the entire screen. I'm wondering how I can achieve this in Angular

Here is the unique html code snippet for a layout that dynamically creates grids using json input: <!DOCTYPE html> <html lang="en"> <head> <title>Booking Page</title> </head> <body> <div ...

htmlcssangulartypescriptcss-grid

Display input field in AngularJS when radio button is selected

My JavaScript array looks like this: $scope.quantityMachines = [ { 'snippet' : 'One' }, { 'snippet' : 'Two' }, { 'snippet' : 'Three or more', 'extraField' : true }, { ' ...

javascripthtmlangularjsng-show

How can I ensure that my content stays fixed at the bottom of a scrolling div in Material UI React?

I have developed a React JS component using Material UI that includes a chat input feature. However, I am facing an issue where the width of the chat input is always half the screen size on desktop or mobile devices. When I try to change the width to 100%, ...

htmlcssreactjsmaterial-ui

CSS code that fixes a textarea at the bottom of a div

I need help placing a textarea at the bottom of a fixed div: <div id=msg> <div id=content> aaaaaaaannnnnnnnnn<br> aaaaaaaannnnnnnnnn<br> aaaaaaaannnnnnnnnn<br> </div> <div id=text> <textar ...

css

The display:flex property with justify-content:space-around is malfunctioning in React and causing issues

I've been trying to troubleshoot the issue with my header, but so far I haven't found a solution. Could you please take a look at my code first? // Code simplified for clarity, no need to worry about variables const Header = () => { return ...

javascripthtmlcssreactjs

Adjust the position if the height exceeds 100 pixels

Can someone help with this code issue? $(document).ready(function () { if ($('.pi-img').height() > 100) { $(this).css('top' , '30%'); console.log('yeah'); } }); I am encountering difficu ...

javascriptjquerycsshtml

By default, the text area element in Vue or Nuxt will send a message to the console

Every time I include a textarea html element in my Vue/cli or Nuxt projects, this message appears in the console. Is there a way to prevent this message from showing up in the console? <textarea rows="5" cols="33"> This is a textarea. < ...

javascripthtmlvue.jsdom-eventsnuxt.js

Creating an interactive map using Python with Folium, incorporating a draggable legend and clickable items for users to easily zoom into specific locations

Looking to create an interactive map with python folium package. Need icons for locations and a draggable legend that allows for repositioning by mouse drag. Also need ability to click on legend items to zoom into corresponding locations on the map. Can s ...

htmlpython-3.xfoliumfolium-plugins

Resizing the container div to perfectly fit the displayed React component

Is there a way to render a component with its style and position defined by specific cases without having to create a container that takes up the entire body? I want the styles of the container to match those of the component, without the need for the cont ...

css