Hide text via CSS?

Question

Is it possible to hide the string Last Name inside a th by using CSS?

It is important that table's background color, font size etc will not be affected.

<html lang="en">

<head>
  <title></title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" />
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
  <br>
  <table>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </table>
</body>

</html>

why dont you just give the tag an id then change the attributes via the css using this ID ? i.e : visibility: hidden; — thatOneGuy
– thatOneGuy, Commented May 22, 2015 at 10:32

Obaid Ahmed · Accepted Answer · 2015-05-22 10:07:35Z

2

<style> 
 .hideMe {display:none;} 
</style>

add this class on "th" and "td" like

<th class="hideMe">Last Name</th>
<td class="hideMe">Otto</td>

Hope this will help you.

answered May 22, 2015 at 10:07

Obaid Ahmed

6061 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user4470482 · Accepted Answer · 2015-05-22 10:13:21Z

2

You can realize that by giving the element an ID or a class and adding styles like

display: none;

for this ID/ this class in your css file.

answered May 22, 2015 at 10:13

user4470482

1 Comment

Woody Over a year ago

This would cause the offending <th> element to disappear punching a hole in the layout given the current DOM. It would also make the column narrower, so he'd need to put the text into another child inside the th which would allow the bg colour of the th to show through.

Simone · Accepted Answer · 2015-05-22 10:03:13Z

0

You can try this:

.hidden-text {
  text-indent: -9999px;
}

answered May 22, 2015 at 10:03

Simone

21.6k15 gold badges84 silver badges112 bronze badges

3 Comments

Rachcha Over a year ago

The OP can definitely try but are you certain that this will help? Sure, we are not here to spoon-feed but answers without an explanation raise quite a few flags.

Simone Over a year ago

Yeah, I should have mentioned at least that the class needs to be added to the th (although it seems pretty obvious to me).

Strikers Over a year ago

@Simone Better tell OP the same in your answer as that will help the others as well when they get a similar problem

stanze · Accepted Answer · 2015-05-22 10:04:16Z

0

You can hide by using CSS pseudo selector.

th:nth-child(3) { 
  display: none;
}

answered May 22, 2015 at 10:04

stanze

2,47814 silver badges14 bronze badges

Comments

ketan · Accepted Answer · 2015-05-22 10:05:20Z

Using nth element you can do it.

th:nth-child(3) {
    display:none;
}

<html lang="en">

<head>
  <title></title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" />
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>




<body>
  <br>
  <table>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </table>
</body>

</html>

Refer this link.

Woody · Accepted Answer · 2015-05-22 10:06:26Z

0

You could make the text the same colour as the background although this would still mean the text was there and selectable, it would preserve all other aspects of the layout. Or you could put the text in a span and make that visibility hidden.

answered May 22, 2015 at 10:06

Woody

8,0822 gold badges23 silver badges25 bronze badges

1 Comment

thatOneGuy Over a year ago

if he does it the first way he could just set pointer-events:none; to the text when its the same colour ...

BONDRV · Accepted Answer · 2015-05-22 10:15:23Z

0

Also you can use visibility property.

th:nth-child(3) {
    visibility:hidden;
}

answered May 22, 2015 at 10:15

BONDRV

597 bronze badges

Comments

Archy · Accepted Answer · 2015-05-22 10:26:44Z

0

You can change the color of your text if don't want to affect table (use rgba properties).

.lastName{
   color:rgba(0,0,0,0); /*Set opacity to 0*/
 }

If you use display property, you will hide all <th></th> (and not just the text).

Good luck,

answered May 22, 2015 at 10:26

Archy

597 bronze badges

Collectives™ on Stack Overflow

Hide text via CSS?

8 Answers 8

Comments

1 Comment

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

1 Comment

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related