This has to be a crazy basic question, but for the life of me I can't figure it out right now...

I have a <td class="hide">Some text</td>

I want only the TEXT/HTML inside of the <td> to be hidden, NOT the entire <td> itself. How can this be achieved with CSS??

jsFiddle Example

*Note

Applying a span inside it, etc isn't necessarily an option.

This has to be a crazy basic question, but for the life of me I can't figure it out right now...

I have a <td class="hide">Some text</td>

I want only the TEXT/HTML inside of the <td> to be hidden, NOT the entire <td> itself. How can this be achieved with CSS??

jsFiddle Example

*Note

Applying a span inside it, etc isn't necessarily an option.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jan 29, 2014 at 17:03 Mark Pieszak - Trilon.ioMark Pieszak - Trilon.io 67.3k1515 gold badges8383 silver badges9696 bronze badges 1

• 1 You can't do that if you don't want to wrap the text inside the td in a container... – damian Commented Jan 29, 2014 at 17:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Instead of

display: none;

You could try

text-indent: -9999px;

What about just making it transparent?

opacity: 0.0;

You can either do:

$('.hide').css('color','rgba(0,0,0,0)');//will make the text transparent and retain the width

or

$('.hide').text('');//will delete the text, not retaining the width

or:

$('.hide').wrap('<span style="opacity:0">');//will use a span and retain the width 

JSFiddle

Hope this helps!