如何更改特定单元格的高度而不影响其行？

Question

基于代码段。我想要＆＃34;合同＆＃34;与其他细胞相比，阶段将具有更高的高度。

我试图使用：

td.active{
    height:100px;
}

但它影响所有细胞，并使所有细胞高度等于100px。

这应该是所需的输出：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

Goli所说的可能是正确的，至少在我对css的体验中。您也不希望额外style=""内联。

您可能想尝试添加一些简单的Javascript内容以使其动态更改。尝试使用document.getElementsByTagName并将style.width设置为所需的金额。 （如果你没有使用过JS，那么W3可以轻松地指导你完成基础知识）