CODEWITHSUNDEEP
htmlcss
Arjay Legaspi
Arjay Legaspi

Reputation: 73

CSS table-layout fixed height issue with <tr> gaps

image

I got this table using

table.b { table-layout: fixed; height: 700px; }

Now, the rows have gone separated way far from each other. I can't seem to find a solution with this. I want it to be like this:

enter image description here

But, I want its height to stay at 700px no matter how many rows in there. How can I achieve that? EDIT: Here's the code:

  <table width="100%" class="b" style="padding-top: 10px;">
   <thead>
    <th width="70%" style="padding:none; text-align: center; line-height:0.5;" class="size3 border"><b>PARTICULARS </b></th>
    <th width="30%" style="padding:none; text-align: center; line-height:0.5;" class="size3 border"><b>AMOUNT </b> </th> 
   </thead>  
   <tbody>
    <% @miscellaneous_fee.miscellaneous_fee_particulars.each do |pd| %>
    <tr class="spaceUnder">
     <td width="70%" style="padding:none; line-height:0.5;" class="size3 border2"><%= pd.chart_of_account.name rescue nil %> <%= pd.description %></td>
     <td width="30%" style="padding:none; text-align: right; border-right: 1px solid black; line-height:0.5;" class="size3 border2"><%= fd pd.amount %> </td> 
    </tr>
    <% end %>
   </tbody>
  </table>

CSS:

table.b {
   table-layout: fixed;
   height: 700px;  
 }

table.b td{ vertical-align: top; }

Upvotes: 1

Views: 838

Answers (1)

Yousaf
Yousaf

Reputation: 29281

Wrap the table in a container and set min-height and max-height on the container element. Also make sure you set overflow property to make table scroll-able inside the container.

In the following example, i have set min and max height to 300px. You can change it to 700px

.table-container {
  border: 1px solid;
  min-height: 300px;
  max-height: 300px;
  width: 100%;
  overflow: auto;
}

table {
  width: 100%;
}

td, td, th, table {
  border-collapse: collapse;
  border-right: 1px solid;
  border-bottom: 1px solid;
  padding: 10px;
}

td:last-of-type,
th:last-of-type,
table {
  border-right: none;
}
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Particulars</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1</td>
        <td>Row 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
        <td>Row 2</td>
      </tr>
      <tr>
        <td>Row 3</td>
        <td>Row 3</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions