Html 引导表 - 较小的字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40125329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstraped table - smaller font size
提问by martinkabe
I'm using bootstrap table in my html:
我在我的 html 中使用引导表：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.table-condensed {
width: 90% !important;
}
And I'd like to make font size in table much smaller. How can I adjust current code to have desired output. Many thanks in advance.
我想让表格中的字体大小更小。如何调整当前代码以获得所需的输出。提前谢谢了。
回答by Nelutu Fona
sir. I would try something like this:
先生。我会尝试这样的事情：
.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>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>I got this fiddle your you: https://jsfiddle.net/mqhd0js6/. Hope it helps!
我得到了你的小提琴：https: //jsfiddle.net/mqhd0js6/。希望能帮助到你！
回答by Peter Húbek
Another option:
另外一个选项：
<table class="table table-sm">
</table>
And in the case you will use the previous solution, I would suggest to use REM units instead of pixels to keep the font size consistent.
如果您将使用以前的解决方案，我建议使用 REM 单位而不是像素来保持字体大小一致。
回答by GBg
in bootstrap 4 :
在引导程序 4 中：
<table class="table w-auto small">
or
或者
<table class="table w-auto text-xsmall">
I use it and work.
我使用它并工作。
回答by Divyanshu Maithani
Simply add a font-size: 8px;to your CSS selector.
只需将 a 添加font-size: 8px;到您的 CSS 选择器。
Replace 8 by any number you wish to change your font-size to.
将 8 替换为您希望将字体大小更改为的任何数字。
回答by pnz
You should use this CSS:
你应该使用这个 CSS：
@media (max-width: 400px) {
.table-responsive {
font-size:10px !important;
}
}
