CODEWITHSUNDEEP
html
sjn
sjn

Reputation: 45

Unable to change table height

I have a table and i want to change its height but when i add the hieght element in the css, nothing changes, i also tried a solution on stackoverflow (Not able to set table height) but none seem to be working. What am i doing wrong?

HTML - 

 <div class="tableDiv">
       <table class="table table-bordered table-condensed" id="StoreData">
         <thead>
             <tr>
                <th>County / Admin district</th>
                <th>Postcode</th>
                <th>Longitude</th>
                <th>Latitude</th>
             </tr>
           </thead>
           {% for Postcode, LongLat in LocationData.items() %}
           <tr>
             <td>{{ LongLat[0] }}</td>
             <td>{{ Postcode }}</td>
             <td>{{ LongLat[1] }}</td>
             <td>{{ LongLat[2] }}</td>
           </tr>
          {% endfor %}
        </table>
      </div>

CSS - 

   <style media="screen">
      html, body, table {
      height: 100%;
      }
      .tableDiv {
      height: 50%;
      }
      table thead {
      position: sticky;
      position: -webkit-sticky;
      top: 0;
      z-index: 999;
      background-color: white;
      color: black;
      }
      #storeform {
      margin-left: 700px;
      margin-top: 50px;
      margin-bottom: 50px;
      }
      #StoreData {
      margin: 10px auto;
      padding: 10;
      width: 1250px;
      overflow-y: scroll;
      }
   </style>

Any help would be appreciated.

Upvotes: 1

Views: 4845

Answers (1)

zer00ne
zer00ne

Reputation: 44088

Fixed Layout

Tables by nature conform to their content. Whatever is within a <td> influences the <td>s width and height and in turn affects the <tr> and then the <tbody>, and finally the <table>. This default behavior is set by table-layout:auto which is only applicable to either <table> or a container element with display: table or display: inline-table. The only other value for table-layout is fixed. A "fixed" table gives the developer more control over the table's behavior by honoring any specified widths given to any <th> (if there are no <th> then the <td> in the top tr>). Since BootStrap is used, we can assign .table-fixed class to <table> the equivalent to table {table-layout: fixed}`.

Now to control the content within a <td> place a <div> or any similar block-level element in each <td>. If you wish to have a min-width or width of any row just apply it to just one of the <div>. Note there are extra rows added and each actually has content: #&nbsp; or non-breaking space which prevents an empty cell from collapsing -- an alternative is to assign each <div> a min-height.

The <div> containing the table has the BS class .table-responsive and is at 50% of the <body> height (also at 100% by BS default). This layout facilitates control on the table externally.

Now we have control of the table width and indirectly the table height. When content is added, and the column width is set explicitly, the content will wrap to the next line instead of stretching the cell. In turn as the cell gains each line so does the row, etc.

Not everything is 100% due to the many unknown factors your real layout may or may not have so when commenting please do not say "It doesn't work". First establish any details that we have missed and then what you observe what's not working and how it should work/appear.

Demo

html,
body {
  height: 100%;
}

.table-responsive {
  height: 50%;
}

table {
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="table-responsive">
  <table class="table table-bordered table-condensed table-fixed" id="StoreData">
    <thead>
      <tr>
        <th class="col-xs-4">County / District</th>
        <th class="col-xs-2">Zip Code</th>
        <th class="col-xs-3">Longitude</th>
        <th class="col-xs-3">Latitude</th>
      </tr>
    </thead>
    <tr>
      <td>
        <div>Bermuda Triangle</div>
      </td>
      <td>
        <div>33036</div>
      </td>
      <td>
        <div>25.0000</div>
      </td>
      <td>
        <div>-71.0000</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
      <td>
        <div>&nbsp;</div>
      </td>
    </tr>
  </table>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Upvotes: 5

Related Questions