0

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>
Stephan Weinhold
  • 1,623
  • 1
  • 28
  • 37
HelloWorld1
  • 13,688
  • 28
  • 82
  • 145
  • 2
    possible duplicate of [Hide text using css](http://stackoverflow.com/questions/471510/hide-text-using-css) – Renfei Song May 22 '15 at 10:05
  • why dont you just give the tag an id then change the attributes via the css using this ID ? i.e : visibility: hidden; – thatOneGuy May 22 '15 at 10:32

8 Answers8

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.

Obaid Ahmed
  • 596
  • 1
  • 3
  • 16
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.

  • This would cause the offending 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. – Woody May 22 '15 at 10:43
0

You can try this:

.hidden-text {
  text-indent: -9999px;
}
Simone
  • 20,302
  • 14
  • 79
  • 103
  • 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. – Rachcha May 22 '15 at 10:25
  • Yeah, I should have mentioned at least that the class needs to be added to the `th` (although it seems pretty obvious to me). – Simone May 22 '15 at 11:18
  • @Simone Better tell OP the same in your answer as that will help the others as well when they get a similar problem – Strikers May 22 '15 at 11:44
0

You can hide by using CSS pseudo selector.

th:nth-child(3) { 
  display: none;
}
stanze
  • 2,456
  • 10
  • 13
0

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.

ketan
  • 19,129
  • 42
  • 60
  • 98
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.

Woody
  • 7,578
  • 2
  • 21
  • 25
  • 1
    if he does it the first way he could just set pointer-events:none; to the text when its the same colour ... – thatOneGuy May 22 '15 at 10:30
0

Also you can use visibility property.

th:nth-child(3) {
    visibility:hidden;
}
BONDRV
  • 59
  • 7
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,

Archy
  • 59
  • 7