Tips for minimizing the gap between two rows in a table with a set height

I've created a table, but I'm facing an issue where the space between two elements is too large when there are multiple items in the loop. How can I decrease the spacing between these elements?

<table width="100%" height="280" border="1" style="border-collapse: collapse;border-color: rgb(10, 10, 10);empty-cells: hide;">


  <thead>
    <th style="font-size: 12px;" width="80">Sr</th>
    <th style="font-size: 12px;" width="400">Description of Goods</th>
    <th style="font-size: 12px;" width="150">HSN</th>
    <th style="font-size: 12px;" width="130">Qty</th>
    <th style="font-size: 12px;" width="130">Unit</th>
    <th style="font-size: 12px;" width="130">Rate (&#x20b9;)</th>
    <th style="font-size: 12px;" width="150">Amount (&#x20b9;)</th>
  </thead>
  <tbody>
    <?php $ctr =0; foreach($datasdetails as $data){ $ctr++; ?>
    <tr>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px; vertical-align: top;">
        <?php echo $ctr; ?>
      </td>
      <td id="t01" style="font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo $data->itemName; ?>
      </td>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo $data->hsnName; ?>
      </td>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo number_format($data->qty_received,$itemDec[0]->noofdecimal);?>
      </td>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo $data->unitName; ?>
      </td>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo number_format($data->rate,2); ?><br>
        <?php if($datas[0]->price_term==1){$pt="(FOR)";}else if($datas[0]->price_term==2){$pt="(EX)";}else{$pt='';} echo $pt; ?>
      </td>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo number_format($data->taxable_value,2); ?>
      </td>
    </tr>
    <?php } ?>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td style="text-align: right;font-size: 12px;">Total</td>
      <td></td>
      <td style="font-size: 12px;text-align: center;">
        <?php echo number_format($datastotal[0]->totalQty,$itemDec[0]->noofdecimal) ; ?>
      </td>
      <td></td>
      <td style="text-align: center;font-size: 12px;">Total</td>
      <td style="font-size: 12px;text-align: center;">
        <?php echo number_format($datastotal[0]->totalAmount,2); ?>
      </td>
    </tr>
  </tfoot>
</table>

https://i.sstatic.net/vhiXr.jpg

htmlcss

Answer №1

It appears that a fixed height is being used for the table

<table width="100%" height="280"

Simply remove height="280"

<table width="100%" border="1" style="border-collapse: collapse;border-color: rgb(10, 10, 10);empty-cells: hide;">


  <thead>
    <th style="font-size: 12px;" width="80">Sr</th>
    <th style="font-size: 12px;" width="400">Description of Goods</th>
    <th style="font-size: 12px;" width="150">HSN</th>
    <th style="font-size: 12px;" width="130">Qty</th>
    <th style="font-size: 12px;" width="130">Unit</th>
    <th style="font-size: 12px;" width="130">Rate (&#x20b9;)</th>
    <th style="font-size: 12px;" width="150">Amount (&#x20b9;)</th>
  </thead>
  <tbody>
    <?php $ctr =0; foreach($datasdetails as $data){ $ctr++; ?>
    <tr>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px; vertical-align: top;">
        <?php echo $ctr; ?>
      </td>
      <td id="t01" style="font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo $data->itemName; ?>
      </td>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo $data->hsnName; ?>
      </td>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo number_format($data->qty_received,$itemDec[0]->noofdecimal);?>
      </td>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo $data->unitName; ?>
      </td>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo number_format($data->rate,2); ?><br>
        <?php if($datas[0]->price_term==1){$pt="(FOR)";}else if($datas[0]->price_term==2){$pt="(EX)";}else{$pt='';} echo $pt; ?>
      </td>
      <td id="t01" style="text-align: center;font-size: 12px;font-size: 12px;vertical-align: top;">
        <?php echo number_format($data->taxable_value,2); ?>
      </td>
    </tr>
    <?php } ?>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td style="text-align: right;font-size: 12px;">Total</td>
      <td></td>
      <td style="font-size: 12px;text-align: center;">
        <?php echo number_format($datastotal[0]->totalQty,$itemDec[0]->noofdecimal) ; ?>
      </td>
      <td></td>
      <td style="text-align: center;font-size: 12px;">Total</td>
      <td style="font-size: 12px;text-align: center;">
        <?php echo number_format($datastotal[0]->totalAmount,2); ?>
      </td>
    </tr>
  </tfoot>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I access a component variable within the styles in Angular?

Is it possible to utilize a variable width in my Angular 5 component template? I would like to achieve something similar to this: <style> input:checked + .slider:before { transform: translateX({{width}}px); } </style> The &apo ...

cssangular

What is the best way to incorporate a dynamic background image into a panel heading using Twitter Bootstrap 3 for a responsive design?

Hey everyone! I'm having trouble adding an image as a background to my panel heading and also including an h3 inside it. Below is the code I am using: <div class="row col-wrap"> <div class="col-lg-4 col"> < ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Transforming HTML into a Console Experience (Angular 16)

I'm experimenting with creating a console/CLI style experience using HTML. The goal is to have the input fixed at the bottom of the window, while commands and output rise up from the bottom and eventually disappear off the top of the screen, enabling ...

javascripthtmlcssangular

Ways to restrict Bootstrap CSS and JavaScript to a specific section of the HTML page

After inheriting a website with an abundance of CSS and JavaScript, the task at hand is adding a toolbar, dialog box, and popper to the existing web page. The ideal choice would be using bootstrap, but unfortunately, there seems to be a conflict between th ...

htmlcssbootstrap-4

Instructions on making a Popup appear after a specified duration of mouse inactivity on a webpage

Hello, I am new to web development and could use some guidance on creating a popup window for users to enter their username and contact number. It should be able to store this information in a database and activate after the user has been idle for about 10 ...

jqueryhtml

Ways to set up various Content-Security-Policies and headers in your application?

In my email application, I am trying to prevent alerts in JavaScript by using a CSP header. However, even with the current policy in place, alerts can still execute when I send an HTML document attachment that contains script tags. Changing all JavaScript ...

javascripthtmlsecurityxsscontent-security-policy

What are the steps to implement email validation, Saudi mobile number validation, and national ID validation in cshtml?

Looking to implement validations for the following fields: email, mobile number (must be 10 numbers and start with 05), and National ID (must be 10 numbers and start with 1 or 2) <input class="form-control" type="text" id="txt ...

javascripthtmlcssasp.netasp.net-mvc

Validating group radio buttons that have been checked

I possess: <div class="group"> <input type="radio" name="myradio" value="1">a <input type="radio" name="myradio" value="2">b </div> <div class="group"> <input type="radio" name="two" value="3">a <input ty ...

javascriptjqueryhtml

"Error message stating 'Unresolved variable' occurs in the code while trying to assign className={styles.nameOfClass

My current task involves adjusting the style of a button in ReactJS using the "className" property. However, I encountered an error message in WebStorm stating "Unresolved variable nameOfClass," and the desired style changes did not reflect when running we ...

cssreactjstypescript

HTML and CSS: Understanding DataTables Header Padding

http://jsfiddle.net/d1zqsayh/ (Strange issue not appearing on jsfiddle, very odd) When I modify the padding in the .css file at line 41 from 10px 18px; to 10px 17px;, I notice a difference in how the content is displayed on my screen in both Google Chrome ...

javascriptjqueryhtmlcssdatatables

Contrasts in characteristics of CSS images versus SVG graphics

I'm curious if there are distinctions between CSS images and SVGs on your website. When referencing CSS images, I mean images constructed with div elements in HTML and then styled using CSS (such as this: https://codepen.io/andrewrock/pen/jOEZxrY). ...

htmlcssperformancesvgdifference

Execute code after the CSS has been loaded, but before the images start downloading

My website is experiencing a challenge. Downloading images is taking too long, with the complete website taking around 20 seconds to fully load on my system. A loader is displayed but only hides once the complete website is loaded (after 20 seconds). Whe ...

javascriptjqueryhtmlcss

Exploring the capabilities of querying HTML using XPath with Python's lxml library

After reading an HTML page as a string, I am using tree = html.fromstring(data). Now, I aim to utilize lxml xpath for querying. Here is an example of the specific part that piques my interest: <table class="class"> <tbody> <tr> &l ...

pythonhtmlxmlxpathlxml

Progress bar carousel component based on advancement movements

Here is the mockup I am working with: https://i.sstatic.net/bIepQ.png So far, I have made good progress with this code: https://codesandbox.io/s/codepen-with-react-forked-16t6rv?file=/src/components/TrendingNFTs.js However, I am facing a couple of challe ...

javascripthtmlcssreactjs

Issues occur with Google visualization when the screen is resized

When I resize the browser, an error code google-visualization-errors-8 appears in my Google chart's CSS. https://i.stack.imgur.com/4LX1C.png What could be causing this error to occur? Note: I am redrawing the graph every time the screen is resized. ...

htmlcsschartsgoogle-visualization

Integrating Images Seamlessly with Text using HTML and CSS

Still getting the hang of this! I'm working on a webpage with an image and text side by side in separate divs. I've positioned them correctly, but when I resize the page, the text changes size while the image stays the same. I want the text to al ...

htmlcssimageresize

Enhance your SVG with a stylish border by adding a decorative

Is there a way to add a blue or black border that follows the curve of an SVG used as a divider? <svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" prese ...

htmlcsssvg

Tips for activating scroll feature for certain section of an HTML page

For the styling of my page, I'm utilizing Scss and am facing an issue related to setting up scrolling for specific sections of an HTML page. You can check out the image reference here. During a scroll event, I want to ensure that the Categories (left ...

htmlcssangularsass

Tips for enabling auto-scroll feature in MuiList

Currently, I am working on a chat window component that utilizes Material UI for styling. I expected that setting a height or max-height on either the MuiList or MuiBox encapsulating the list would automatically scroll to the new message when it's sen ...

javascriptcssreactjsmaterial-uistyled-components

additional one hour of generated report added >

My Select option code is causing some issues. When I view the uploaded data, there seems to be a duplication and an extra tag at the end: <option value="Running Request |Running > 1 hour">Running Request |Running > 1 hour</option> The ...

html