在 table bootstrap 中更改 header 的高度

Question

我有一个 bootstrap table :

<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 的高度，th : "15px" 。

Answer 1

在你的 html 文件中你有 bootstrap cdn link 或本地目录路径，在 boostrap link 之后添加你的路径 css 文件。始终在 bootsrap link 之后添加 css 文件 link，这样它会覆盖任何 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 2

试试这个 css

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

Answer 3

有两种方法

Css 文件或 <style></style>

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


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

Answer 4

使用默认字体大小，table 头部将始终大于 15px。您必须减小字体大小（和填充）以获得所需的高度。

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

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

Answer 5

您必须从 bootstrap 覆盖 css，因此将 class 添加到 table，例如 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。

在 table bootstrap 中更改 header 的高度

Change height of header in table bootstrap

css

jquery

twitter-bootstrap

twitter-bootstrap-3

bootstrap-table