CODEWITHSUNDEEP
twitter-bootstraphtml-table
user1260928
user1260928

Reputation: 3429

Table with bootstrap 3, set row lower than 37px

I am working on a screen with resolution 1440*900, I want to display a table with small height rows.

But it seems that I can't set a row height lower than 37px. I need to have a smaller height (20px). Is it impossible with bootstrap or am I doing something wrong? Here s my 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;
}

Upvotes: 0

Views: 9139

Answers (2)

Brian Tompsett - 汤莱恩
Brian Tompsett - 汤莱恩

Reputation: 5883

The OP wrote in an edit:

With this additional css :

tr{
height : 20px;
font-size: x-small;
margin: 0 0 0 0;
}

I managed to do it.

Upvotes: 0

Leandro Carracedo
Leandro Carracedo

Reputation: 7345

As you are using bootstrap, the td is by default modified in order to have padding and border, so you have to include your own modifications in order to have a real 20px height.

You could make them globally and override all the table sections related in the bootstrap css file or you could just change them for your own class or table.

In the bootstrap css you could find:

.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;
}

For your example:

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

With CSS:

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

Check this bootply.

Upvotes: 2

Related Questions