セル内のテキストの量に関係なく、テーブルの列幅を一定に設定しますか？

テーブルで、列の最初のセルの幅をに設定しました100px。
ただし、この列のいずれかのセルのテキストが長すぎる場合、列の幅はを超え100pxます。この拡張を無効にするにはどうすればよいですか？

私はそれを理解するのに苦労したので、少し遊んだ。

セルの幅を設定する必要があります（どちらかthまたはtd機能table-layoutしfixedます。両方を設定します）ANDをに設定します。何らかの理由で、セルの幅はテーブルの幅も設定されている場合にのみ固定されているように見えます（私はそれはばかげていると思いますが、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>

ここではJSFiddleにあります

この男にも同様の問題がありました：表のセル幅-幅の修正、長い単語の折り返し/切り捨て

参照：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>です。これはあなたを助けます。他には何も機能しません。

例えば。

<td><div style="width: 50px" >...............</div></td>

1つ以上の固定幅の列が必要で、他の列のサイズを変更する必要がある場合は、両方min-widthとmax-width同じ値に設定してみてください。

これを対応するCSS内に記述する必要があります

table-layout:fixed;

私がしていることは：

1. tdの幅を設定します。

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. CSSでtdの幅を設定します。

   <td style="width:200px; height:50px;">

3. 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">

クラス属性を任意に配置し<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>

また、width：autoを使用して、最後の「フィラーセル」を配置することもできます。これにより残りのスペースが占有され、他のすべての寸法は指定されたままになります。

固定幅よりも小さい場合、受け入れられた回答が小さな画面に応答するようにします。

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フィドル

https://jsfiddle.net/w9s3ebzt/

これを設定する：

style="min-width:100px;" 

私のために働いた。

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>
  <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;
}

結果を見る

または、colgroupHyathinの回答で提案されているとおりに使用します。

次のように、存在するテキストに関係なく最小幅を設定するセルで:: after要素を使用します。

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

テーブルの親に幅を設定したり、テーブルレイアウトを使用したりする必要はありません。

私はKAsunの答えが次のようにpxの代わりにvwを使用するとうまく機能することを発見しました：

<td><div style="width: 10vw" >...............</div></td>

これは、列の幅を調整するために必要な唯一のスタイリングでした

"fixed"設定する必要はありません- overflow:hidden列の幅が設定されているので、必要なのは設定だけです。