Question

我有一个引导表：

<table class="table-bordered table-condensed table-hover">
 <thead>
  <tr>
   <th>Id</th>
   <th>ProductName</th>
   <th>Price</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>bicycle</td>
   <td>5000</td>
  </tr>
 </tbody>
</table>

我想更改 thead，的高度： “15px” 。

Answer 1

使用默认的字体大小，表头总是大于15px。您必须减小字体大小（和填充）以获得所需的高度。

＆＃13;

thead th {
  font-size: 0.6em;
  padding: 1px !important;
  height: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table-bordered table-condensed table-hover">
 <thead>
  <tr>
   <th>Id</th>
   <th>ProductName</th>
   <th>Price</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>bicycle</td>
   <td>5000</td>
  </tr>
 </tbody>
</table>

＆＃13;

Answer 2

在您的html文件中，您有bootstrap cdn链接或本地目录路径，在boostrap链接后添加路径到您的css文件。始终在bootsrap链接之后添加你的css文件链接，以便它覆盖任何bootstrap css。

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="yourpathname.css">

然后转到您的css文件并添加：您必须添加大于15像素的内容。

 th {
        height: 50px;
    }

Answer 3

试试这个css

   table th, table thread {
    height: 80px;
}

Answer 4

有两种方式

Css文件或<style></style>

<style>
    thead th{
       Height: 15px;
    }
</style>


<thead>
    <th style="height: 15px"></th>
<thead>

Answer 5

你必须从bootstrap覆盖css，所以在表中添加一个类，例如class =“my-table”。

  .my-table thead th {
    padding: 10px 0 5px 0 !important;
  }

我只是在挑选数字，但你需要通过改变我添加的数字来使这个数字相等。

主要是在css之后添加！important文本。这将覆盖bootstrap css。另请注意。当写css：padding：10px 0 5px 0时，第一个数字是padding-top，第二个数字是padding-right，第三个数字是padding-bottom，第四个数字是padding-left。

更改表引导程序中标头的高度

5 个答案: