624

私のテーブルでは、列の最初のセルの幅を に設定しました100px。
ただし、この列のいずれかのセルのテキストが長すぎると、列の幅が より大きくなり100pxます。この拡張機能を無効にするにはどうすればよいですか?

4

16 に答える 16

697

わかりにくかったのでちょっと遊んでみました。

セル幅を設定する必要があります（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>

ここにJSFiddleがあります

この男も同様の問題を抱えていました:表のセル幅 - 幅の固定、長い単語の折り返し/切り捨て

于 2010-12-16T06:04:31.613 に答える
214

参照: 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>
于 2013-04-08T16:15:47.670 に答える
143

<div>内側にタグを追加する<td>か<th>、内側に幅を定義するだけ<div>です。これはあなたを助けます。他に何も機能しません。

例えば。

<td><div style="width: 50px" >...............</div></td>
于 2012-05-06T22:25:09.647 に答える
73

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

于 2012-09-06T12:28:07.490 に答える
36

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

table-layout:fixed;
于 2010-12-16T04:47:33.177 に答える
26

私がすることは：

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

class 属性を任意の場所に配置し<td>ます。

于 2012-06-26T05:31:57.077 に答える
3

固定レイアウトが必要ない場合は、列のクラスを指定して適切なサイズにします。

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>
于 2012-03-24T04:21:04.783 に答える
3

私はこれを使いました

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}
于 2013-05-10T21:40:41.507 に答える
1

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>
于 2012-07-11T00:35:14.313 に答える
-4

KAsun の回答は、次のようにpxの代わりにvwを使用するとうまく機能することがわかりました。

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

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

于 2016-09-19T00:36:01.360 に答える
-5

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

于 2013-09-09T09:07:40.923 に答える