<tr>は、子孫の高さをとらない<span>

この<tr>は、子孫の高さである<span>を受けておらず、一部のテキストが次の行にオーバーフローしています。テキストとキャプションの両方を含むように行を拡張するにはどうすればよいですか？<tr>は、子孫の高さをとらない<span>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.green-red.min.css"> 
 
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 

 
<table class="mdl-data-table"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="mdl-data-table__cel--non-numeric"> 
 
     <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> 
 
      <input type="checkbox" class="mdl-checkbox__input" /> 
 
      <span class="mdl-checkbox__label"> 
 
      <p class="mdl-typography--body-1 mdl-typography--text-left">Barack H. Obama</p> 
 
      <p class="mdl-typography--caption mdl-typography--text-left">Democratic</p> 
 
      </span> 
 
     </label> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

現在の表：

目的のテーブル：

出典

2017-02-15 Brian

それは完全な作業EXAで編集することが可能です何か？実際に生成/レンダリングされたHTML/CSSコードなしでは、何を意味するのかを知ることは難しいです。 [最小限で完全で検証可能なサンプルの作成方法]（http://stackoverflow.com/help/mcve）を参照してください。 – showdev

スパンのスタイルに 'display：inline-block'を追加してみてください –

：E行、これを試してみてください。そのクラスは<label>要素に適用されます。そのスタイルをオーバーライドすることが役に立ちました。

しかし、他の要素にどのように影響するかわかりません。たぶん "Material Design Lite"は、既存のスタイルをオーバーライドするのではなく、より統合されたソリューションを提供します。

label.mdl-checkbox { 
 
    height: auto; 
 
}

<link href="//code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> 
 
<script defer src="//code.getmdl.io/1.3.0/material.min.js"></script> 
 
<table class="mdl-data-table"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="mdl-data-table__cel--non-numeric"> 
 
     <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> 
 
      <input type="checkbox" class="mdl-checkbox__input" /> 
 
      <span class="mdl-checkbox__label"> 
 
      <p class="mdl-typography--body-1 mdl-typography--text-left">Barack H. Obama</p> 
 
      <p class="mdl-typography--caption mdl-typography--text-left">Democratic</p> 
 
      </span> 
 
     </label> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2017-02-15 20:45:53 showdev

まず、<tr>にoverflow:hiddenを追加あふれコンテンツを非表示にすると、あなたがする必要がある場合オンにコンテンツを保存するクラス.mdl_checkboxは24ピクセル（material.indigo-pink.min.css）の固定の高さを持っているように見えます

label { 
    display: flex; 
    flex-wrap: nowrap; 
} 

label .mdl-checkbox__input { 
    flex-basis: 20%; 
} 

label .mdl-checkbox__label { 
    flex-basis: 80%; 
    overflow: hidden; 
    text-overflow: ellipsis; //will cut the word with ..., if it too long 
    line-height: //your value 
}

出典

2017-02-15 20:25:28

<ラベル>、<スパン>要素は、インライン財産です。だから、彼らは<p>のようなブロックプロパティを持つことはできません。あなたはその後、<スパン>にパディングや高さを与え、最初の要素を修正する必要が<ラベル>スペックhere、および<スパン>スペックhere

を見てくださいし、「表示：インラインブロック」を与える<スパン>

に

label{ 
 
    display:block; 
 
    padding:20px 0; 
 
} 
 
.mdl-checkbox__label{ 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 

 
.mdl-typography--body-1{ 
 
    display:block; 
 
    padding:0 0 20px; 
 
} 
 
.mdl-typography--caption{ 
 
    display:block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<table class="mdl-data-table" border=1> 
 
    <tbody> 
 
    <tr> 
 
     <td class="mdl-data-table__cel--non-numeric"> 
 
     <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> 
 
      <input type="checkbox" class="mdl-checkbox__input" /> 
 
      <span class="mdl-checkbox__label"> 
 
      <span class="mdl-typography--body-1 mdl-typography--text-left" > 
 
       Barack H. Obama 
 
      </span> 
 
      <span class="mdl-typography--caption mdl-typography--text-left" > 
 
       Democratic 
 
      </span> 
 
      </span> 
 
     </label> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</body> 
 
</html>

出典

2017-02-15 21:02:01 Victoria

<tr>は、子孫の高さをとらない<span>

答えて

関連する問題