Rules of HTML tables extend to the border size

Check out this HTML code snippet:

div {
  border: 2px solid red;
  height: 50vh;
  width: 50vw;
}

table {
  border: 1px solid;
  table-layout: fixed;
}
<div>
  <table rules="cols">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Phone No</th>
    </tr>


    <tr>
      <td>Antony</td>
      <td>20</td>
      <td>USA</td>
      <td>12345</td>
    </tr>
    <tr>
      <td>Das</td>
      <td>20</td>
      <td>UK</td>
      <td>12345</td>
    </tr>

    <tr>
      <td>Michel</td>
      <td>20</td>
      <td>USA</td>
      <td>12345</td>
    </tr>

  </table>
</div>

The initial output is shown here:

https://i.sstatic.net/bjA3R.png

I would like the outcome to resemble this instead:

https://i.sstatic.net/fVHXr.png

To achieve this effect, I require the border rule to extend until the end.

Adjusting the table's height currently resizes along with the content,

https://i.sstatic.net/Beu6h.png

I am in need of resizing only the column rules. Any suggestions will be greatly appreciated.

htmlcsshtml-table

Answer №1

To ensure the last row of your table expands with empty space, you can add a tall div within one of the columns in that row. Keeping the width minimal (such as 1 pixel) will prevent the column from widening beyond the content width. Set the height to a large value, taking advantage of the parent div's overflow hidden property.

Setting vertical-align to top is essential for maintaining alignment, especially when rows wrap and ensuring content appears correctly positioned.

div {
  border: 2px solid red;
  height: 50vh;
  width: 50vw;
  overflow:hidden;
}

tr {                             
    vertical-align:top;
}

.empty-space {                   
    width:1px;
    height:99999px;  
}

table {
  border: 1px solid;
  table-layout: fixed;
  
}
<div>
  <table rules="cols">
   ...
  </table>
</div>

It's important to note that refining your code may be necessary for better control over styling. Utilizing class names in your CSS allows targeted application of styles rather than affecting all elements universally.

Answer №2

Hello, it's important to adjust the width and height of the TABLE based on its parent tag, which is the DIV

      div {
        width: 100%;
    height: 100%;

    text-align: center;
}

table {
  border: 1px solid;
  table-layout: fixed;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Title Here</title>
  </head>
  <body>
    
    <div >
      <table rules="cols" w>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
          <th>Phone No</th>
        </tr>
    
    
        <tr>
          <td>Antony</td>
          <td>20</td>
          <td>USA</td>
          <td>12345</td>
        </tr>
        <tr>
          <td>Das</td>
          <td>20</td>
          <td>UK</td>
          <td>12345</td>
        </tr>
    
       <tr>
          <td>Michel</td>
          <td>20</td>
          <td>USA</td>
          <td>12345</td>
        </tr>
    
      </table>
    </div>
  </body>
</html>

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

When I zoom in, h4 and h5 headers expand and extend beyond their boundaries

Currently, I am working on designing forms for this specific website. Everything appears to render properly at normal zoom levels. However, when I adjust the zoom in or out slightly, issues arise where the h4's and h5's are no longer centered wit ...

htmlcssoverflowweb

Improving Consistency: Achieving a Uniform a:hover Effect for Links Listed in Lists

One issue I'm having is with creating a list of links and styling them with a:hover. The problem arises when the list has a defined width wider than the links themselves, causing the LIs to change color before the As on hover. It creates a messy appea ...

htmlcsshoverhtml-listsbullet

Learning how to utilize various types of buttons in C# and ASP.NET with this

I was following this tutorial: I like everything the same except I want to make the following change: <section> <a rel="external" href="#button" id="button">&#xF011;</a> <span></span> </section> ...

c#jquerycssasp.net

Prevent the overlap of text by controlling the positioning of a div element

Below is a simplified version of the layout I'm working with: <div style="position: relative; width:600px;"> <p>Content with unknown length, but very lengthy</p> <div>Content with unknown height</div&g ...

htmlcss

"Why is my Python Selenium code returning an empty list when trying to find elements by xpath

Currently, I am attempting to extract a table from a password-protected website using Firefox. In order to access the table, I must first select the product, input the dates for the start and end, and complete the verification process by sliding. My goal i ...

pythonhtmlseleniumweb-scraping

The CSS command for displaying additional content is not functioning within table elements

I'm attempting to add a 'read more' arrow to the third column, which should expand the text in the first column when clicked. I have the following code, and it works fine outside of a table but not inside one. Where am I going wrong? I prefe ...

css

Having trouble importing Google Fonts using Styled Components and Next.js?

I encountered an issue while attempting to load Google Fonts. I came across a solution that suggests adding the following code snippet in _document.js to import it within a head tag: import React from 'react'; import Document, { Html, Head, Main, ...

cssreactjsnext.jsserver-side-renderingstyled-components

Why isn't the externally loaded JS file executing properly?

My javascript code functions properly when it's embedded within the HTML file. However, I encounter issues when I try to import it externally. The Google Developer Tools indicate that the file has been loaded successfully, but there seems to be no vis ...

javascripthtml

"Picture positioned on the edge of the container, just on one

Using Bootstrap 4, I was able to create a container with a div positioned outside of the container on the right side. Now I am wondering if it is possible to achieve the same effect with a picture div. I managed to do so by using a pseudo-element :after an ...

htmlcss

Combining Blazor with Bootstrap for seamless form validation

After gaining some experience with Razor, I decided to explore Blazor. However, I encountered a familiar challenge - integrating validation with Bootstrap. The issue lies in the mismatch between Blazor's validation result classes and those of Bootstra ...

cssvalidationbootstrap-4blazor

Conflict between iOS 7+ swipe back gesture and stateChange animations

When transitioning between states in an AngularJS application, I utilize CSS animations to add visual appeal to the view change. This may involve applying fades or transforms using classes like .ng-enter and .ng-leave. In iOS 7+, users can swipe their fin ...

javascriptjqueryioscssangularjs

View the selected radio buttons and checkboxes next to each other in real-time before finalizing and submitting

Within my form, individuals have the option to select from radio buttons and checkboxes. The challenge is that I need to display the chosen data on the page before they enter their email and submit! Since I cannot refresh the page, PHP won't work for ...

javascriptphpjqueryhtmlajax

Learn how to send dynamic data to another HTML element using Ajax's success function

I received a successful ajax response from one HTML file, but I'm struggling to dynamically set the data from this response to another HTML file. Can anyone help me with this issue? Here is the code snippet from my ajax report: success: function( ...

javascriptjqueryhtmlajax

What is the best way to incorporate Font Awesome icons into a UTF-16 encoded HTML document?

Trying to incorporate Font Awesome icons in UTF-16 encoded HTML pages can be a bit tricky. Following these steps should help you achieve the desired results: <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.fontawe ...

cssunicodeutf-8font-awesomeutf-16

What is the best way to dynamically convert a lodash object (specifically a filter object) into jQuery's listview component?

After referencing the answer to this topic as my first step, which can be found here, my next goal is to utilize a filter function to retrieve all matching entries from a JSON file based on a search term. The objective is to loop through each match and con ...

javascriptjquerycssjsonsearch

Adding a CSS link to the header using JavaScript/jQuery

Is there a way to dynamically inject a CSS link located in the middle of an HTML page into the head using JavaScript? <head> ... styles here </head> <body> code <link href='http://fonts.googleapis.com/css?family=Lato:400,300, ...

javascriptjqueryhtmlcss

Is it possible to position my label above my text box input?

Having trouble aligning the checkbox label with the edge of the text area in my login form code. It always ends up on the right side, outside of the div container when inspected. I've attempted setting a left value for the label, but it causes issues ...

htmlcss

The :empty selector is failing to function properly in @media print queries

Currently, I am working in Twig on Symphony and have encountered an issue with an empty div that needs to be hidden in print mode. <div class="form-fields__list"> </div> Surprisingly, the :empty selector works perfectly fine on the screen, bu ...

cssprintingmedia-queriesselector

Stacking elements in perfect alignment

Seeking assistance with React/MUI as a newcomer. I am utilizing a Stack of TextFields, which are resizing effectively based on screen width. <Stack direction="row" sx={{ margin: "16px" }} > ...

cssreactjsmaterial-ui

How to perfectly align columns using Bootstrap

Looking to create two fixed columns in Bootstrap. The current layout can be seen in the image below: I want the left and right column to align at the top regardless of the number of items in each column. Refer to the image below. Here is my code snippet: ...

htmltwitter-bootstrapcss