Question

是否可以使用CSS隐藏Last Name内的字符串th？

表格的背景颜色，字体大小等不会受到影响。

＆＃13;

<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>

＆＃13;

Answer 1

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

在“th”和“td”上添加此类，如

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

希望这会对你有所帮助。

Answer 2

您可以通过为元素提供ID或类并添加

等样式来实现

display: none;

此css文件中的此ID /此类。

Answer 3

你可以试试这个：

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

Answer 4

您可以使用CSS pseudo selector进行隐藏。

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

Answer 5

使用第n个元素就可以了。

＆＃13;

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

＆＃13;

<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>

＆＃13;

参考this link.

Answer 6

您可以使文本与背景颜色相同，但这仍然意味着文本在那里并且可选择，它将保留布局的所有其他方面。或者您可以将文本放在跨度中并隐藏该可见性。

Answer 7

您也可以使用可见性属性。

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

Answer 8

如果不想影响表格，可以更改文本的颜色（使用rgba属性）。

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

如果您使用展示属性，则会隐藏所有<th></th>（而不仅仅是文本）。

祝你好运，

通过CSS隐藏文字？

8 个答案: