Question 179069 in CSS Question posted in
Some basic documentation can be found here.

“Can CSS move table row data to an upwards td if the td is empty?”

I have one html table and there are some rows inside the table. See the code below-

       <table border="1">

          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td></td>!-- Empty row -->
            <td>Column 4</td>
         </tr>

          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
         </tr>    

      </table>

And it will looks like below in browser-

enter image description here

We can see in above html code that, there is an empty "td" in first row. And it’s showing blank when we are running the code in browser. I just want to move the data in each td to upwards td if there is no data in it.

So that, it should looks like below-

enter image description here

Is there any way to handle this by CSS changes ? If not then by any HTML changes. But I would like to avoid using any third party JS/CSS file to handle this.

Tags:

2

Answers


  1. 0

    I have read you don’t need to use javascript, You can try this css, hoping it will work —

    <!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>Document</title>
</head>
<body>

    <style>
        th, td { border: 1px solid rgb(0, 0, 0);
        background-color: rgb(255, 255, 255);
        padding: 5px;}

       /*th:empty,*/ td:empty { display: none; }

    /* or you can also use */
     /* table { empty-cells: hide; }
     */

    </style>
       <table>

        <tr>
          <td>Column 1</td>
          <td>Column 2</td>
          <td></td>
          <td>Column 4</td>
       </tr>

        <tr>
          <td>Column 1</td>
          <td>Column 2</td>
          <td>Column 3</td>
          <td>Column 4</td>
       </tr>    

    </table>

</body>
</html>

    Everything can happen in theory, imagination is good but different from reality.

    Login or Signup to reply.
  2. 0

    I am assuming that the data is columnar: an item is not related to items on its left and right but to items above and below it. In that case you should change the HTML markup:

    #data {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

#data > div > div {
  background-color: orange;
}
    <div id="data">
  <div>
    <div>Column 1</div>
    <div>Column 1</div>
  </div>
  <div>
    <div>Column 2</div>
    <div>Column 2</div>
  </div>
  <div>
    <div><!-- empty row --></div>
    <div>Column 3</div>
  </div>
  <div>
    <div>Column 4</div>
    <div>Column 4</div>
  </div>
</div>

    Another example, using grids:

    dl, dt, dd {
  margin: 0;
}

dl {
  display: grid;
  grid-template-rows: repeat(9, auto);
  grid-auto-flow: column;
  grid-gap: .5em;
}

dt {
  grid-row-start: 1;
  background-color: orange;
}

dd {
  background-color: yellow;
}

dd:empty {
  display: none;
}
    <dl>
  <dt>Heading 1</dt>
  <dd>Value 1<br>another line</dd>
  <dd>Value 2</dd>
  <dt>Heading 2</dt>
  <dd>Value 1</dd>
  <dd>Value 2</dd>
  <dt>Heading 3</dt>
  <dd></dd>
  <dd>Value 2</dd>
  <dt>Heading 4</dt>
  <dd>Value 1</dd>
  <dd>Value 2</dd>
</dl>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search