引导表 - 较小的字体大小

Question

我在我的html中使用bootstrap表:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.table-condensed {
width: 90% !important;
}

而且我想让表中的字体大小更小.如何调整当前代码以获得所需的输出.提前谢谢了.

Answer 1

先生.我会尝试这样的事情:

.table-condensed{
  font-size: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-condensed">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@example.com</td>
    </tr>
  </tbody>
</table>

我得到了这个小提琴:https://jsfiddle.net/mqhd0js6/.希望能帮助到你!

Answer 2

在引导程序 4 中：

<table class="table w-auto small">

或者

<table class="table w-auto text-xsmall">

我使用它并工作。

Answer 3

另外一个选项：

<table class="table table-sm">
</table>

并且在您将使用先前的解决方案的情况下，我建议使用REM单位而不是像素，以保持字体大小一致。

Answer 4

只需将 a 添加font-size: 8px;到您的 CSS 选择器即可。

将 8 替换为您想要更改字体大小的任何数字。