javascript - 如何在不影响其行的情况下更改特定单元格的高度？

Question

基于片段。我希望“契约(Contract)”阶段与其他单元格相比具有更高的高度。

我尝试使用:

td.active{
    height:100px;
}

但它会影响所有单元格，并使所有单元格的高度等于 100px。

这应该是所需的输出:

#disposition tr:nth-child(2){
  border-bottom: 3px #818286 solid;
  font-size: 15px;
}



#disposition tr:nth-child(1) td{
  background-color: gray;
  color:white;

  border: 3px white solid;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);

  height: 70px;
  vertical-align: middle;
  font-size: 15px;
  overflow: hidden;
}
#disposition tr:nth-child(1) td.done{
  background-color: #249fda;
}
#disposition tr:nth-child(1) td.active{
  background-color: #249fda;
}
#disposition td{
  text-align: center;
}
#disposition td i{
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}
#disposition td.active-box{
  background-color: gray;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<table class="table" id="disposition">
    <tbody>
      <tr>
       <td class="done">
         <i class="fa fa-check" aria-hidden="true"></i>
        </td>
        <td class="done">
          <i class="fa fa-check" aria-hidden="true"></i>
        </td>
        <td class="done">
          <i class="fa fa-check" aria-hidden="true">    </i>
        </td>
        <td class="active" style="">
          <i class="fa fa-file-text-o" aria-hidden="true"></i>
          </td>
        <td>
          <i class="fa fa-pencil" aria-hidden="true"></i>
        </td>
        <td>
          <i class="fa fa-money" aria-hidden="true"></i>
        </td>
        <td>
          <i class="fa fa-retweet" aria-hidden="true"></i>
        </td>
      </tr>

      <tr class="stage-names">
                                <td>Application</td>
                                          <td>Documents</td>
                                          <td>Under Review</td>
                                        <td title="Contracts make it all legal and binding for both sides." style="color: #249fda; font-family:'CooperHewitt-BoldItalic'">Contracts</td>
                                          <td>Underwriting	</td>
                                          <td>Funding</td>
                                          <td>Payback</td>
                        </tr>

    </tbody>

  </table>

Answer 1

Goli 所说的可能是正确的，至少以我对 css 的经验而言是这样。您也不想要额外的 style="" 内联。

您可能想尝试添加一些简单的 Javascript 内容以使其动态变化。尝试使用 document.getElementsByTagName 并将 style.width 设置为您想要的数量。 (如果您在 W3 可以轻松带您了解基础知识之前没有使用过 JS)