行に影響を与えずに特定のセルの高さを変更するにはどうすればよいですか？

Question

スニペットのベース。私は、 "契約"ステージが他のセルと比較してより高い高さを持つことを望みます。

私が使用しようとした：

td.active{ 
    height:100px; 
} 

それはすべてのセルに影響を与え、 100pxに等しいすべてのセルの高さを行います。

これは、所望の出力のようになります。ではなく、テーブルの行の内、要素あなたが達成しようとしている行動がfloats/flexで可能である

#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 \t </td> 
 
              <td>Funding</td> 
 
              <td>Payback</td> 
 
         </tr> 
 

 
    </tbody> 
 

 
    </table>

Answer 1

とさえinline-block （親要素がtableのいずれかと表示されている場合はおそらく不可能です）。

Answer 2

少なくとも、私のcssの経験では、Goliが言ったことはおそらく正しいでしょう。あなたはまた、余分なstyle=""をインラインではしたくありません。

動的に変更するには、単純なJavascriptのものを追加してみてください。 document.getElementsByTagNameを使用し、style.widthを希望する量に設定してみてください。 （W3が基本を簡単に歩くことができる前にJSを使用していない場合）