Question

由于某种原因，我必须使用一个表，该表每行包含两个单元格，我想通过将第一个单元格的溢出属性设置为hidden并将其宽度设置为0来动画化第一个单元格的宽度，但是当我将宽度设置为0时，实际渲染的宽度为3px
这是我的标记

  .news-element {
  width: auto;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  .news-element-table {
    border-collapse: collapse;
    display: table;
  }
  .news-element-img {
    width: 17vw;
    height: 300px;
    display: table-cell;
    position: relative;
    overflow: hidden;
    .news-element-img-wrapper {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }
    img {
      position: absolute;
      height: 100%;
      width: auto;
      min-width: 100%;
      top: 0;
      left: 50%;
      bottom: 0;
      right: 0;
      transform: translateX(-50%);
      margin: auto;
    }
    // h 336 
    // w 236
  }
  .news-element-description {
    width: 0;
    // w 414 
    position: relative;
    overflow: hidden;
    height: 100%;
    display: table-cell;
    .news-element-description-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      text-align: center;
      padding: 10px;
    }
  }
  .news-element-title {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 3px;
    background: #2E3132;
    color: #fff;
  }

<div class=" news-wrapper ">

  <div class="news-element ">

    <table class="news-element-table ">
      <tr>
        <td class="news-element-description">
          <div class="news-element-description-wrapper">
            <p>
              blah blah blah
            </p>
          </div>
        </td>
        <td class="news-element-img">
          <div class="news-element-img-wrapper">
            <img src="<?= getFileLink(" /assests/imgs/Media05.jpg "); ?>" />
          </div>
        </td>
      </tr>
    </table>

    <div class="news-element-title">
      <h6>foo </h6>
    </div>
  </div>

</div>

我正在使用table方法，因此我可以根据其同级设置第一个单元格的高度。

Answer 1

我只是遇到了表行高和列宽拒绝变为0的类似问题。我的解决方案是将width和max-width或height和max-height设置为s.th。略高于 0，就像这样

width:0.01px; max-width:0.01px;
height:0.01px; max-height:0.01px;

也许结合

visibility:hidden;

不知道，为什么将它们设置为0无效...

Answer 2

我使用此CSS完全隐藏了我的单元格：

.hide-col {
  overflow: hidden;
  width: 0!important;
  max-width: 0!important;
  padding: 0!important;
  border-width: 0!important;
  font-size: 0!important;
}

HTML表格单元格宽度0不起作用？

2 个答案: