常に特定の幅にしたい表のセルがあります。ただし、スペースのないテキストの大きな文字列では機能しません。ここにテストケースがあります：
td {
border: solid green 1px;
width: 200px;
overflow: hidden;
}<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>ボックスを拡大するのではなく、テキストをボックスの端で切り取るにはどうすればよいですか？
回答:
これは同じ問題です。
あなたは、設定する必要がtable-layout:fixed とだけでなく、テーブル要素に適した幅overflow:hiddenとwhite-space: nowrapテーブルセルの上に。
テーブルの幅は、固定幅のセルと同じ（または小さい）必要があります。
固定幅の列が1つある場合：
複数の固定幅の列がある場合：
テーブルの幅を設定する必要がありますが、追加の幅は流体セルによって単純に取得されます。
複数の列で、固定幅と流動幅：
それがTDのやり方です。TD要素の「display」プロパティが「block」ではなく「table-cell」に本質的に設定されているためと考えられます。
あなたの場合、代替策は、TDの内容をDIVでラップし、DIVに幅とオーバーフローを適用することです。
<td style="border: solid green 1px; width:200px;">
<div style="width:200px; overflow:hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
</td>対処する必要があるパディングまたはセルパディングの問題がいくつかある可能性があります。インラインスタイルを削除し、代わりに外部CSSを使用することをお勧めしますが、これは出発点です。
TDのテーブルとスタイルにCSS table-layout:fixed;（場合によってはwidth:<any px or %>）を適用しwhite-space: nowrap; overflow: hidden;ます。次に、正しいセルまたは列要素にCSS幅を設定します。
重要なことに、固定レイアウトテーブルの列幅は、テーブルの最初の行のセル幅によって決まります。最初の行にTH要素があり、（THではなく）TDに幅が適用される場合、幅はTDのコンテンツにのみ適用されます（空白とオーバーフローは無視される場合があります）。テーブルの列は、設定されたTD幅に関係なく（最初の行のTHに指定された幅がないため）均等に分布し、列は[計算された]等しい幅になります。テーブルは、後続の行のTD幅に基づいて列幅を再計算しません。テーブルが遭遇する最初のセル要素の幅を設定します。
また、設定列幅の最も安全な方法は、使用することです<COLGROUP>し、<COL>各固定幅COL上のCSSの幅を設定してテーブルのタグ。セル幅に関連するCSSは、テーブルが列の幅を事前に知っている場合により適切に機能します。
さてここにあなたのための解決策がありますが、なぜそれが機能するのか本当にわかりません：
<html><body>
<div style="width: 200px; border: 1px solid red;">Test</div>
<div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels. These pretzels are making me thirsty.</div>
<div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
<table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
<td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div></td>
</tr></table>
</body></html>つまり、セルの内容をdivでラップします。
最善の解決策は、divを幅がゼロのテーブルセルに配置することです。Tbodyテーブルセルは、theadで定義された幅から幅を継承します。位置：相対および負のマージンがトリックを実行するはずです！
こちらがスクリーンショットです：https : //flic.kr/p/nvRs4j
<body>
<!-- SOME CSS -->
<style>
.cropped-table-cells,
.cropped-table-cells tr td {
margin:0px;
padding:0px;
border-collapse:collapse;
}
.cropped-table-cells tr td {
border:1px solid lightgray;
padding:3px 5px 3px 5px;
}
.no-overflow {
display:inline-block;
white-space:nowrap;
position:relative; /* must be relative */
width:100%; /* fit to table cell width */
margin-right:-1000px; /* technically this is a less than zero width object */
overflow:hidden;
}
</style>
<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
<thead>
<tr>
<td style="width:100px;" width="100"><span>ORDER<span></td>
<td style="width:100px;" width="100"><span>NAME<span></td>
<td style="width:200px;" width="200"><span>EMAIL</span></td>
</tr>
</thead>
<tbody>
<tr>
<td><span class="no-overflow">123</span></td>
<td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
<td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
</tbody>
</table>
</body>：あなたは、テーブルのスタイル属性を設定する必要がありますwidthし、table-layout: fixed;できるようにする「オーバーフロー：隠されたが;」属性は適切に機能します。
Imoこれは、divをwidthstyle属性とともに使用するよりもうまく機能します。特に動的なサイズ変更の計算に使用する場合、テーブルは単純なDOMを持ち、パディングとマージンの修正が不要なため操作が簡単になります。
追加として、すべてのセルに幅を設定する必要はなく、最初の行のセルにのみ設定します。
このような：
<table style="width:0px;table-layout:fixed">
<tr>
<td style="width:60px;">
Id
</td>
<td style="width:100px;">
Name
</td>
<td style="width:160px;overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
<tr>
<td style="">
Id
</td>
<td style="">
Name
</td>
<td style="overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
</table>もっと簡単にするために、tdの中にtextareaを置くことを提案します自動的にオーバーフローを管理します
<td><textarea autofocus>$post_title</textarea></td>
改善する必要があります
<style>
.col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
<tr>
<td class="col">123456789123456789</td>
</tr>
</table>123456を表示
vertical-align:middleれ、DIVに追加しても問題は解決しません。