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

div tag inside th is not taking full height – Html

I am working on a html table. In table heading, I want heading name and an image. Table width is fixed and if there are extra columns then it will be scrollable.

Since I want 2 things in heading(text and image), inside the th tag of tr, I am putting a div and making it a flex box.

Here is my code:

<table class="Table_table__7VuZZ">
   <thead>
      <tr>
        <th>
          <div class="test">
             <div>Layers</div>
             <div>
                <img src="pin.svg" class="icon"/>
             </div>
          </div>
        </th>
        <th>
          <div class="test">
             <div>Layer Policy Number testing purpose<</div>
             <div>
                <img src="pin.svg" class="icon"/>
             </div>
          </div>
        </th>
        <th>
          <div class="test">
             <div>Layer Policy Number testing purpose<</div>
             <div>
                <img src="pin.svg" class="icon"/>
             </div>
          </div>
        </th>
        <th>
          <div class="test">
             <div>Layer Policy Number testing purpose<</div>
             <div>
                <img src="pin.svg" class="icon"/>
             </div>
          </div>
        </th>
    </tr>
 </thead>
 <tbody>
    <tr>
       <td>Primary</td>
       <td>111</td>
       <td>NO</td>
       <td>aa</td>
    </tr>
 </tbody>
</table>

And below is the css:

.test {
 display : flex;
 height : 100%;
 position : top
}

th, td, tr {
  padding : 0;
  margin : 0
}

table {
  border-collapse : collapse;
  width : 200px;
  overflow: scroll
}

.icon{
  height : 15px;
  width : 15px
}

I don’t know why div inside th is not taking 100% height. It is always in centre of the th. I try setting height to 100% of div but it is not working. I have set all padding and margin to 0. Still doesn’t works. Here is the codepen link : https://codepen.io/devendra1102/pen/wvEERpx

Does anyone can help to fit the div inside th to take 100% height?

Tags:

2

Answers


  1. 0

    First things first, to keep the pin image always at the top right, add the following ruleset to your code:

    .test {
  justify-content: space-between;
}

    Then to place the text at the top, add this:

    th,
td,
tr {
  vertical-align: top;
}

    Complete CSS code:

    .test {
  display: flex;
  justify-content: space-between;
}

th,
td,
tr {
  padding: 0;
  margin: 0;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  width: 200px;
  overflow: scroll;
}

.icon {
  height: 15px;
  width: 15px;
}

    This will continue to work whatever the width or height of the cells.

    Login or Signup to reply.
  2. 0

    If all you want is for the content of your cells to be at the top of the cells, add td,th { vertical-align: top; }.

    If you really want your flex boxes to be the same height as the table cells, then add td, th { height: 1px; }

    .test {
 display : flex;
 height : 100%;
 background: orange;
 /* position : top this does nothing */
}

th, td, tr {
  padding : 0;
  margin : 0;
}

th, td {
  height: 1px;
}

table {
  border-collapse : collapse;
  width : 200px;
  overflow: scroll
}

.icon{
  height : 15px;
  width : 15px
}
    <table class="Table_table__7VuZZ">
  <thead>
    <tr>
      <th>
        <div class="test">
          <div>Layers</div>
          <div>
            <img
              src="pin.svg"
              class="icon"
              alt=""
            />
          </div>
        </div>
      </th>
      <th>
        <div class="test">
          <div>Layer Policy Number testing purpose</div>
          <div>
            <img src="pin.svg" class="icon" alt="" />
          </div>
        </div>
      </th>

      <th>
        <div class="test">
          <div>Layer Limit</div>
          <div>
            <img src="pin.svg" class="icon" alt="" />
          </div>
        </div>
      </th>
      <th>
        <div class="test">
          <div>Policy</div>
          <div>
            <img src="pin.svg" class="icon" alt="" />
          </div>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Primary</td>
      <td>111</td>
      <td>NO</td>
      <td>aa</td>
    </tr>
    <tr>
      <td>Primary</td>
      <td>1111</td>
      <td>NO</td>
      <td>aa</td>
    </tr>
  </tbody>
</table>
    .test {
 display : flex;
 background: orange;
 /* position : top this does nothing */
}

th, td, tr {
  padding : 0;
  margin : 0;
}

th, td {
  vertical-align: top;
}

table {
  border-collapse : collapse;
  width : 200px;
  overflow: scroll
}

.icon{
  height : 15px;
  width : 15px
}
    <table class="Table_table__7VuZZ">
  <thead>
    <tr>
      <th>
        <div class="test">
          <div>Layers</div>
          <div>
            <img
              src="pin.svg"
              class="icon"
              alt=""
            />
          </div>
        </div>
      </th>
      <th>
        <div class="test">
          <div>Layer Policy Number testing purpose</div>
          <div>
            <img src="pin.svg" class="icon" alt="" />
          </div>
        </div>
      </th>

      <th>
        <div class="test">
          <div>Layer Limit</div>
          <div>
            <img src="pin.svg" class="icon" alt="" />
          </div>
        </div>
      </th>
      <th>
        <div class="test">
          <div>Policy</div>
          <div>
            <img src="pin.svg" class="icon" alt="" />
          </div>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Primary</td>
      <td>111</td>
      <td>NO</td>
      <td>aa</td>
    </tr>
    <tr>
      <td>Primary</td>
      <td>1111</td>
      <td>NO</td>
      <td>aa</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search