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

先生。我会尝试这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

我让你这个小提琴：https://jsfiddle.net/mqhd0js6/。希望它有所帮助！

Answer 2

另一种选择：

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

如果您将使用以前的解决方案，我建议使用 REM单位而不是像素，以保持字体大小一致。

Answer 3

在引导程序4中：

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

或

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

我使用它并工作。

Answer 4

只需在CSS选择器中添加font-size: 8px;。

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

Answer 5

您应该使用此CSS：

@media (max-width: 400px) {  
    .table-responsive {
        font-size:10px !important;
    }
}

引导表 - 较小的字体大小

5 个答案: