在表引导程序中更改标题的高度答案

【问题标题】：Change height of header in table bootstrap在表引导程序中更改标题的高度
【发布时间】：2017-01-05 04:27:21
【问题描述】：

我有一个引导表：

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

【问题讨论】：

你想要只有th 的高度还是thead 和th 的高度？
在使用 bootstrap css 时，只能增加 padding 以获得想要的高度。
@nareeboy : 我该怎么办？
在下面发布了答案

标签： jquery css twitter-bootstrap twitter-bootstrap-3 bootstrap-table

【解决方案1】：

在你有引导 cdn 链接或本地目录路径的 html 文件中，在 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;
    }

【讨论】：

为什么我不能添加高度 link
这是我的假设，不要拿我的工作为它。有时在 bootstrap 中某些元素设置的 padding、margin 和 height 可能超过您希望的高度。因此，由于您的与 bootstrap 相比较小，因此不会抵消它们并显示您希望的高度。这就是为什么在这种情况下你会想要更大的东西来展示你的东西。例如，还有一种情况是引导导航栏会覆盖您的内容，并且您必须添加额外 70 像素的填充，因为默认导航栏的高度为 50 像素。

【解决方案2】：

试试这个css

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

【讨论】：

【解决方案3】：

有两种方法

Css 文件或<style></style>

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


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

【讨论】：

【解决方案4】：

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

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>

【讨论】：

我明白了。谢谢！

【解决方案5】：

您必须从引导程序覆盖 css，因此向表中添加一个类，例如 class="my-table"。

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

我只是在挑选数字，但您需要通过更改我添加的数字来使其相等。

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

【讨论】：