私のテーブルでは、列の最初のセルの幅を100px
に設定しています。
ただし、この列のセルの1つのテキストが長すぎると、列の幅が100px
以上になります。どうすればこの展開を無効にできますか?
私はそれを理解するのに苦労したので私はそれを少し遊んだ。
あなたはセル幅を設定する必要があります(th
かtd
がうまくいった、私は両方を設定します)そしてtable-layout
をfixed
に設定します。何らかの理由で、セル幅もテーブル幅が設定されている場合にのみ固定されているように見えます(私はそれは愚かだがwhatevだと思います)。
また、余分なテキストがテーブルから出ないようにするために、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/ /
Tableタグの後にはcol要素を使います。終了タグは必要ありません。
たとえば、3つの列があるとします。
<table>
<colgroup>
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
</colgroup>
<tbody>
...
</tbody>
</table>
<div>
内に<td>
タグを追加するか、<th>
内に<div>
define widthを追加するだけです。これはあなたを助けるでしょう。他に何も機能しません。
例えば。
<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で幅を最大と最小に設定し直します。
<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">
Class属性を任意の<td>
に配置します。
width:auto で、最後の「フィラーセル」を入れるのにも役立ちます。これは残りのスペースを占有し、指定どおりに他のすべての寸法を残します。
私はこれを使った
.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>
KAsunは正しい考えを持っています。これが正しいコードです...
<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フィドル
私の答えによれば ここ は、を使うことも可能です。 テーブルヘッド (これは空でもかまいません)各テーブルヘッドセルに相対幅を適用します。テーブル本体のすべてのセルの幅は、それらの列ヘッドの幅に一致します。例:
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;
}
あるいは、Hyathinの答えで示唆されているようにcolgroup
を使用してください。
これを設定します。
style="min-width:100px;"
私のために働きました。