Twitter Bootstrap Question posted in

Table td is not 100% – Twitter bootstrap

I would like know why my td is not getting 100% in my table.

this code need to exist:

.table-scroll tbody {
  display: block;
  overflow-y: scroll;
  height: calc(100% - 130px);
}

this happen when I use display block, anyway i tried so many things and the td still not getting 100% of the table

jsfiddle: https://jsfiddle.net/zuxq2gr0/1/

css:

.panel-table {
  height:auto;
  width:300px;
  border: 1px solid red;
}

.table-scroll tbody {
    display:block;
    overflow-y: scroll;
    height: calc(100% - 130px);
}

html:

  <!doctype html>
    <html>
      <head>
        <title>Aurelia</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <div class="panel-table">
          <table class="table table-scroll">
            <thead>
            </thead>
            <tbody>
              <tr>
                <td>Joseph</td>
              </tr>
              <tr>
                <td>Mary</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
            </tbody>
          </table>
        </div>
      </body>

    </html>
Tags:

2

Answers


  1. 0

    You can add this style:

    .table-scroll tbody > tr {
  display: table;
  width: 100%;
}

    Here is an updated fiddle

    Why does your tbody need to be display: block? You are breaking the table layout and you will get odd behavior like this.

    Login or Signup to reply.
  2. 0

    Just set ‘tr’ as ‘display: block’ too and it should works

    tr, td {
  display: block;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search