表の​​要素の幅と省略記号を設定する

Question

td内のテキストの長さが異なる表があります。 td要素に固定幅を与え、td要素にtext-overflow: ellipsisを使用して、テキスト全体が表示されないようにします。私はさまざまな方法を試しましたが、何も動作しません、誰かが私はこれを達成する方法で私を助けてください。

\t \t <table> 
 
\t \t <tr> 
 
\t \t  <th>title</th> 
 
\t \t  <th>link</th> 
 
\t \t  <th>description</th> 
 
\t \t  <th>id</th> 
 
\t \t  <th>condition</th> 
 
\t \t  <th>price</th> 
 
\t \t  <th>availability</th> 
 
\t \t  <th>image_link</th> 
 
\t \t  <th>Shipping</th> 
 
\t \t  <th>"shipping weight"</th> 
 
\t \t  <th>gtin</th> 
 
\t \t  <th>brand</th> 
 
\t \t  <th>mpn</th> 
 
\t \t  <th>google_product_category</th> 
 
\t \t  <th>product_type</th> 
 
\t \t  <th>additional_image_link</th> 
 
\t \t  <th>color</th> 
 
\t \t  <th>size</th> 
 
\t \t  <th>Gender</th> 
 
\t \t  <th>age_group</th> 
 
\t \t  <th>item_group_id</th> 
 
\t \t  <th>sale_price</th> 
 
\t \t  <th>"sale price effective date"</th> 
 
\t \t  <th>size_type</th> 
 
\t \t  <th>size_system</th> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t  <td>"Metallic turquoise leather envelope clutch"</td> 
 
\t \t  <td style="width: 200px">https://www.runway2street.com/bags/clutch-bags/metallic-turquoise-leather-envelope-clutch</td> 
 
\t \t  <td>" This elegant jeweltoned metallic leather envelope clutch with wrist strap is perfect for a fancy night out! It has a natural cork trim, magnetic closure and a zipper pocket on the inside to fit a cell phone. All accessories and hardware on the bag are gold plated. Material: 100 leather, goldplated hardwareCountry of manufacture: Lebanon "</td> 
 
\t \t  <td>4</td> 
 
\t \t  <td>new</td> 
 
\t \t  <td>"370 USD"</td> 
 
\t \t  <td>"in stock"</td> 
 
\t \t  <td>http://az697095.vo.msecnd.net/vnext/products/3/12/Anja_Not-for-the-shy_accessories_bags_clutches_Turquoise-Cork_Metallic-turquoise-leather-envelope-clutch_38_320x480_v3.jpg</td> 
 
\t \t  <td>"US::Standard Free Shipping: 47 USD"</td> 
 
\t \t  <td></td> 
 
\t \t  <td></td> 
 
\t \t  <td>Anja</td> 
 
\t \t  <td>FALSE</td> 
 
\t \t  <td>"Apparel &amp; Accessories &gt; Handbags, Wallets &amp; Cases &gt; Handbags &gt; Clutches &amp; Special Occasion Bags"</td> 
 
\t \t  <td>"Clutch Bags"</td> 
 
\t \t  <td>http://az697095.vo.msecnd.net/vnext/products/3/12/Anja_Not-for-the-shy_accessories_bags_clutches_Turquoise-Cork_Metallic-turquoise-leather-envelope-clutch_35_320x480_v3.jpg</td> 
 
\t \t  <td>Turquoise/Cork</td> 
 
\t \t  <td>"One size"</td> 
 
\t \t  <td>Female</td> 
 
\t \t  <td>Adult</td> 
 
\t \t  <td>ANJAFW12mec.ct</td> 
 
\t \t  <td></td> 
 
\t \t  <td></td> 
 
\t \t  <td>Regular</td> 
 
\t \t  <td>US</td> 
 
\t \t </tr> 
 
\t \t </table>

Answer 1

table td { 
    white-space: nowrap; 
    min-width: 100px; 
    max-width: 100px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    border: 1px solid #000000; 
} 

（注）このCSSルールを追加します。JS-Fiddle Link

： 最大幅なく 幅

Editを使用

Answer 2

テーブルセルのスタイリングは常に問題がありました。

現在、最も信頼性の高い方法は、各セルにコンテナブロックを追加し、それらをスタイルすることです。

div.c { 
 
    width:200px; 
 
    overflow:hidden; 
 
    text-overflow:ellipsis; 
 
    white-space:nowrap; 
 
}

<table> 
 
    <tr> 
 
    <th>title</th> 
 
    <th>link</th> 
 
    <th>description</th> 
 
    <th>id</th> 
 
    <th>condition</th> 
 
    <th>price</th> 
 
    <th>availability</th> 
 
    <th>image_link</th> 
 
    <th>Shipping</th> 
 
    <th>"shipping weight"</th> 
 
    <th>gtin</th> 
 
    <th>brand</th> 
 
    <th>mpn</th> 
 
    <th>google_product_category</th> 
 
    <th>product_type</th> 
 
    <th>additional_image_link</th> 
 
    <th>color</th> 
 
    <th>size</th> 
 
    <th>Gender</th> 
 
    <th>age_group</th> 
 
    <th>item_group_id</th> 
 
    <th>sale_price</th> 
 
    <th>"sale price effective date"</th> 
 
    <th>size_type</th> 
 
    <th>size_system</th> 
 
    </tr> 
 
    <tr> 
 
    <td><div class="c">"Metallic turquoise leather envelope clutch"</div></td> 
 
    <td><div class="c">https://www.runway2street.com/bags/clutch-bags/metallic-turquoise-leather-envelope-clutch</div></td> 
 
    <td><div class="c">" This elegant jeweltoned metallic leather envelope clutch with wrist strap is perfect for a fancy night out! It has a natural cork trim, magnetic closure and a zipper pocket on the inside to fit a cell phone. All accessories and hardware on the bag 
 
     are gold plated. Material: 100 leather, goldplated hardwareCountry of manufacture: Lebanon "</div></td> 
 
    <td><div class="c">4</div></td> 
 
    <td><div class="c">new</div></td> 
 
    <td><div class="c">"370 USD"</div></td> 
 
    <td><div class="c">"in stock"</div></td> 
 
    <td><div class="c">http://az697095.vo.msecnd.net/vnext/products/3/12/Anja_Not-for-the-shy_accessories_bags_clutches_Turquoise-Cork_Metallic-turquoise-leather-envelope-clutch_38_320x480_v3.jpg</div></td> 
 
    <td><div class="c">"US::Standard Free Shipping: 47 USD"</div></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td><div class="c">Anja</div></td> 
 
    <td><div class="c">FALSE</div></td> 
 
    <td><div class="c">"Apparel &amp; Accessories &gt; Handbags, Wallets &amp; Cases &gt; Handbags &gt; Clutches &amp; Special Occasion Bags"</div></td> 
 
    <td><div class="c">"Clutch Bags"</div></td> 
 
    <td><div class="c">http://az697095.vo.msecnd.net/vnext/products/3/12/Anja_Not-for-the-shy_accessories_bags_clutches_Turquoise-Cork_Metallic-turquoise-leather-envelope-clutch_35_320x480_v3.jpg</div></td> 
 
    <td><div class="c">Turquoise/Cork</div></td> 
 
    <td><div class="c">"One size"</div></td> 
 
    <td><div class="c">Female</div></td> 
 
    <td><div class="c">Adult</div></td> 
 
    <td><div class="c">ANJAFW12mec.ct</div></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td><div class="c">Regular</div></td> 
 
    <td><div class="c">US</div></td> 
 
    </tr> 
 
</table>

Answer 3

th,td 
{ 
max-width: 100px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

これは