セル内のテキストの量に関係なく、テーブル列の幅定数を設定しますか？
https://stackoverflow.com/questions/4457506
-
10-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私のテーブルでは、列の最初のセルの幅を設定します 100px.
ただし、この列のセルの1つのテキストが長すぎると、列の幅は以上になります 100px. 。この拡張を無効にするにはどうすればよいですか？
解決
私はそれを理解するのに苦労したので、私はそれで少し遊んだ。
セルの幅を設定する必要があります（どちらか th また td 動作し、両方を設定して）を設定します table-layout に fixed. 。何らかの理由で、テーブルの幅が設定されている場合にのみセルの幅が固定されたままであるように見えます（それは愚かだと思いますが、何が馬鹿げていると思います）。
また、設定すると便利です overflow プロパティへ hidden 余分なテキストがテーブルから出ないようにするため。
CSSの境界とサイジングのすべてを必ず残してください。
わかりました、これが私が持っているものです：
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th,
td {
border: 1px solid black;
width: 100px;
overflow: hidden;
}<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>この男にも同様の問題がありました： テーブルセルの幅 - 幅の固定、長い単語の包装/切り捨て
他のヒント
見る：http://www.html5-tutorials.org/tables/changing-column-width/
テーブルタグの後、col要素を使用します。クロージングタグは必要ありません。
たとえば、3つの列がある場合：
<table>
<colgroup>
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
</colgroup>
<tbody>
...
</tbody>
</table>
追加するだけです <div> 内部のタグ <td> また <th> 内部の幅を定義します <div>. 。これはあなたを助けます。他に何もうまくいきません。
例えば。
<td><div style="width: 50px" >...............</div></td>
1つの鉱石が必要な場合は、他の列がサイズを変更する必要がある場合は、両方を設定してみてください min-width と max-width 同じ値に。
これを対応するCSS内に書く必要があります
table-layout:fixed;
私がしていることは：
TD幅を設定します：
<td width="200" height="50"><!--blaBlaBla Contents here--></td>CSSでTD幅を設定します。
<td style="width:200px; height:50px;">CSSを使用して、幅を最大およびminとして再度設定します。
<td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
少し繰り返し聞こえますが、望ましい結果が得られます。これを簡単に達成するには、スタイルシートのクラスにCSS値を入力する必要があります。
.td_size {
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
**overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/
}
それから：
<td class="td_size">
クラス属性を任意に配置します <td> あなたが欲しい。
私はこれを使用しました
.app_downloads_table tr td:first-child {
width: 75%;
}
.app_downloads_table tr td:last-child {
text-align: center;
}
また、最後の「フィラーセル」を入れるのにも役立ちます。 幅：自動. 。これにより、残りのスペースが占められ、指定された他のすべての寸法が残ります。
固定レイアウトが必要ない場合は、列のクラスを適切にサイズにすることを指定します。
CSS：
.special_column { width: 120px; }
HTML：
<td class="special_column">...</td>
カスンには正しいアイデアがあります。これが正しいコードです...
<style type="text/css">
th.first-col > div,
td.first-col > div {
overflow:hidden;
white-space:nowrap;
width:100px
}
</style>
<table>
<thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
<tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>
固定幅よりも小さい場合は、小さな画面に対して受け入れられた回答を応答させます。
HTML：
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
CSS
table{
border: 1px solid black;
table-layout: fixed;
max-width: 600px;
width: 100%;
}
th, td {
border: 1px solid black;
overflow: hidden;
max-width: 300px;
width: 100%;
}
JSフィドル
私の答えに従って ここ, 、aを使用することも可能です テーブルヘッド （空にすることができます）、各テーブルヘッドセルに相対幅を適用します。テーブル本体のすべてのセルの幅は、柱の頭の幅に適合します。例：
HTML
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="70%"></th>
<th width="15%"></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some text...</td>
<td>May 2018</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td>Another text...</td>
<td>April 2018</td>
<td>Edit</td>
</tr>
</tbody>
</table>
CSS
table {
width: 600px;
border-collapse: collapse;
}
td {
border: 1px solid #999999;
}
または、使用してください colgroup Hyathinの答えで示唆されているように。
これを設定：
style="min-width:100px;"
私のために働いた。
Kasunの答えは使用する方がうまくいくことがわかりました VW それ以外の PX そのようです：
<td><div style="width: 10vw" >...............</div></td>
これは、列の幅を調整するために必要な唯一のスタイリングでした
設定する必要はありません "fixed" - 必要なのは設定だけです overflow:hidden 列幅が設定されているため。
