How to solve this weird issue in html table and css.


Tags: html,css,table

Problem :

I have a weird issue regarding 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>

I want the text inside span have a white background, but I don't want the white background extend to only the edge of the texts, so I applied padding.

However, some of the texts are inside the background, but some of them are not.

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

or 

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


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

I have give td, span and tr larger width but it still not working well.



Solution :

Setting display: inline-block; on your span should fix this.

As is pointed out in the comments below, span is by default an inline element, but that does not mean that you can't set its padding, setting the padding works just fine on inline elements. Your problem lies with the fact that you have set your table to be 87px wide, and the td to be 50px wide. Now the text inside your span does not fit inside the td, and because it is an inline element, it flows on to the next line. Setting display: inline-block; forces the text to not flow onto the next line. Another way to fix this is by setting your table and your td to be wider, so that it can fit more text on one line.

What you were observing with the "missing" padding on one or on both sides of your span, was not really "missing" padding. The padding is added at the start, at the end, at the top and at the bottom of the span. So in the places where the padding was "missing", it was simply not there because you were looking at a line-break, not at the end or the start of the span. Another way you could have fixed this is by setting white-space: nowrap; on the span. That's another way to ensure that the text inside a span does not wrap onto the next line.


    CSS Howto..

    how to make background css url dynamic using jquery

    How to add focus on label css style

    How to make corners of progress bar round in css

    How to create icons like font awesome

    How to make all my div's same height based on breathing content

    How do I change the admin header color in Magento?

    Dojo: how to find css definition for digit.form.filteringselect, especially the drop down list?

    How to create the Facebook Status arrowed textbox?

    How to do “display = block” using jquery for particular element

    How Should I Send HTML/CSS Content To A Server?

    How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?

    How to stack and hide images in a Div in order to animate between them (without floats)

    How to parse a specific link using a Selector CSS Query

    How to remove unwanted whitespace css/html

    How to use both fixed and stretchy CSS content

    jQuery CSS how to avoid flickering?

    How to set hover of the block which contains icon with HTML or CSS?

    How do I center text next to a floating image using css?

    How to create fluid trapezoid image with css?

    how to make two functionality in one button.CSS BOOTSTRAP

    How would you design the css and html to divide up this rounded widget?

    How to move items to left inside a div?

    How to make last element in a series of wrapped inline-block elements fill the available horizontal space?

    How to remove space between columns in BluePrint CSS framework?

    How to create a Line Item with vertical middle aligned text?

    How to Over ride youtube external style?

    How to determine CSS attribute is set on the element?

    How to get rid of column border of gridview using CSS

    How to add tooltip to image on hover with CSS

    How to position my image below and to the right of my text?