Html Question posted in
Some basic documentation can be found here.

HTML table rules till the size of border

I have below html code,

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 result of the code is,

enter image description here

I’m expecting to have the result as,

enter image description here

I need the rule till end of the border.

When I try resizing the height of the table, it is getting resized along with the content,

enter image description here

I want only the column rule to be resized, any suggestion would be appreciated

Tags:

2

Answers


  1. 0

    Hello, you should adjust the width and height of the TABLE according to the DIV, which is the parent tag

          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>SabzLearn | Ts :))</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>
    Login or Signup to reply.
  2. 0

    You’ll want to make the last row expand the height of the table with empty space. In this way the rules will continue to the bottom.

    Place an empty, tall div in one of your columns of the last row. 1 pixels wide is fine, but any width (including 0) less than the width of your actual content in that column is ideal. Otherwise the column will get wider.

    Set the height to an arbitrarily large value. This only works because your parent div has overflow hidden. If you didnt have that there then you would need to use javascript to dynamically calculate the needed height of the row stretching div.

    Also set vertical-align to top so that your last row of content (and other rows as well when they wrap) don’t look centered in the middle of the row.

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

tr {                             /* <--- Addition here  */
    vertical-align:top;
}

.empty-space {                   /* <--- Addition here  */
    width:1px;
    height:99999px;  /* arbitrary large height, adjust as needed or set to very high and forget it */
}

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 style="">
      <td>Michel<div class="empty-space"></div></td>
      <td>20</td>
      <td>USA</td>
      <td>12345</td>
    </tr>

  </table>
</div>

    This solution is just to give you some ideas. You may in the end want to refactor your code a bit. Future problem: where you have styling on div affects all divs, not just the div wrapping the table. This is why the empty-space filling div ends up with a red border too, although in the current demo thats desirable so we can see it.

    As opposed to having css that affects all divs and all tables for that matter, in your style block, use a dot in front of an arbitrary classname and then use class on the element referencing that classname. For example:

    .table-wrap-div { /* this is a class because of the leading dot */
  border: 2px solid red;
  height: 50vh;
  width: 50vw;
  overflow:hidden;
}

<div class="table-wrap-div">
   <table rules="cols">
   ...
   </table>
</div>

    In this way you have more control over your code and styling because it targets only the divs that reference the classname.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search