Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstraped table - smaller font size

Tags:

I'm using bootstrap table in my 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.

like image 954
martinkabe Avatar asked Oct 19 '16 07:10

martinkabe


People also ask

How do I make my bootstrap table font smaller?

Simply add a font-size: 8px; to your CSS selector. Replace 8 by any number you wish to change your font-size to. Show activity on this post. It's always best to add an explanation as to what your code does and why it solves the stated problem.

How do I reduce font-size in a table in HTML?

You could add this code inline to the <table> tag, the <tr> tag or to each <th> tag. A few options but this is the code you need: style=font-size:12px, change 12 to whatever font size suits your needs. You could add this code inline to the <table> tag, the <tr> tag or to each <th> tag.

How do I change the size of text in a table in HTML?

To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.


1 Answers

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!

like image 91
Nelutu Fona Avatar answered Nov 08 '22 11:11

Nelutu Fona