css 如果td为空,如何将td中表行的数据向上移动td

euoag5mw  于 2023-06-07  发布在  其他
关注(0)|答案(1)|浏览(176)

我有一个html表,表内有一些行。请看下面的代码-

<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>

它将在浏览器中显示如下-

在上面的HTML代码中,我们可以看到,第一行中有一个空的“td”。当我们在浏览器中运行代码时,它显示为空白。我只是想把每个td中的数据移到向上的td,如果其中没有数据的话。
所以,它应该看起来像下面-

有没有办法通过CSS修改来处理这个问题?如果不是,则通过任何HTML更改。但是我想避免使用任何第三方JS/CSS文件来处理这个问题。

zzzyeukh

zzzyeukh1#

我假设数据是柱状的:项目不与其左侧和右侧的项目相关,而是与其上方和下方的项目相关。在这种情况下,你应该修改HTML标记:

#data {
  display: flex;
  flex-direction: row;
}

#data > div > div {
  background-color: yellow;
  margin-bottom: .5em;
  margin-right: .5em;
}

#data > div > div:empty {
  display: none;
}
<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 --></div>
    <div>Column 3</div>
  </div>
  <div>
    <div>Column 4</div>
    <div>Column 4</div>
  </div>
</div>

另一个例子,使用语义标记和CSS网格来很好地对齐单元格:

/* reset */
dl {
  margin: 0;
}
dt {
  background-color: orange;
}
dd {
  margin: 0;
  background-color: yellow;
}
/* grid layout */
dl {
  display: grid;
  grid-auto-flow: column;
  gap: .5em;
}
dt:nth-of-type(2),
dt:nth-of-type(2) ~ dd {
  grid-column-start: 2;
}
dt:nth-of-type(3),
dt:nth-of-type(3) ~ dd {
  grid-column-start: 3;
}
dt:nth-of-type(4),
dt:nth-of-type(4) ~ dd {
  grid-column-start: 4;
}
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><!-- empty --></dd>
  <dd>Value 2</dd>
  <dt>Heading 4</dt>
  <dd>Value 1</dd>
  <dd>Value 2</dd>
</dl>

相关问题