带有引导程序 3 的表，设置行低于 37px答案

【问题标题】：Table with bootstrap 3, set row lower than 37px带有引导程序 3 的表，设置行低于 37px
【发布时间】：2017-02-01 17:45:04
【问题描述】：

我正在使用分辨率为 1440*900 的屏幕，我想显示一个高度小的表格。

但我似乎无法将行高设置为低于 37px。我需要一个较小的高度（20px）。引导程序是不可能的还是我做错了什么？这是我的 plunkr： [http://plnkr.co/edit/9P3ZqbIJON3bCC2jm67J?p=preview]

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>

    <table class="table table-striped">
      <thead>
        <tr>
          <th>id</th>
          <th>Label</th>
          <th>age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>test</td>
          <td>10</td>
        </tr>
        <tr>
          <td>1</td>
          <td>test</td>
          <td>10</td>
        </tr>
    </table>
  </body>
</html>

style.css：

tr {
  height:20px;
}

【问题讨论】：

标签： twitter-bootstrap html-table

【解决方案1】：

当您使用引导程序时，默认情况下会修改 td 以获得填充和边框，因此您必须包含自己的修改才能获得真正的 20 像素高度。

您可以全局创建它们并覆盖引导 css 文件中相关的所有表部分，或者您可以为自己的类或表更改它们。

在引导 css 中你可以找到：

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

你的例子：

<table id="mytable" class="table table-striped">
      <thead>
        <tr>
          <th>id</th>
          <th>Label</th>
          <th>age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>test</td>
          <td>10</td>
        </tr>
        <tr>
          <td>1</td>
          <td>test</td>
          <td>10</td>
        </tr>
      </tbody>
</table>

使用 CSS：

#mytable >tbody>tr>td{
  height:20px;
  padding:0px;
  border-top: 0px;
}

检查这个bootply。

【讨论】：

【解决方案2】：

OP 在编辑中写道：

有了这个额外的 css：
tr{
height : 20px;
font-size: x-small;
margin: 0 0 0 0;
}
我成功了。

【讨论】：

(Answered in a question edit and converted to a community wiki)