1

cssが含まれているtdがたくさんあるテーブルがあります

text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
max-width:84px;
padding-left:10px;

すべて正常に動作しますが、これらのtext-overflow: ellipsis; の一部の td に編集可能な div もあります。動作していません。

それらは隠されていますが、コンテンツについては...

編集

ここで、テーブルを生成するために使用しているHTML

<table>
   <tr>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Job Title</th>
     <th>Company</th>
     <th>Email</th>
   </tr>
   <tr>
     <td>ABC</td>
     <td>XYZ</td>
     <td>Software Engineer</td>
     <td><div contenteditable="true">ABC Corporation</div></td>
     <td><div contenteditable="true">abc@gmail.com</div></td>
   </tr>
</table>
4

2 に答える 2

1

The way your elements are nested means you need to apply the style to td div as well as td. This CSS works for the HTML you have supplied:

td div{
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
max-width:84px;
padding-left:10px;
}

And here's a jsFiddle

于 2013-06-06T10:32:42.307 に答える
-1

display: blockスタイルに追加します。

text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
max-width:84px;
padding-left:10px;
display:block;
于 2013-06-06T10:26:19.213 に答える