パーセンテージを使用してテーブルセルの最大幅を設定するにはどうすればよいですか？

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

上記は動作しません。パーセンテージを使用してテーブルセルの最大幅を設定するにはどうすればよいですか？

CSS 2.1仕様のmax-widthの定義によれば、「テーブル、インラインテーブル、テーブルセル、テーブル列、および列グループに対する「min-width」および「max-width」の影響は定義されていません。」したがって、td要素にmax-widthを直接設定することはできません。

2番目の列を最大で67％だけ使用する場合は、幅（テーブルセルの実際の最小幅）を33％に設定できます（例の場合）。

td:first-child { width: 33% ;}

両方の列にこれを設定しても、ブラウザが列の幅を等しくする傾向があるため、うまく機能しません。

古い質問ですが、table-layout: fixedtableタグのcssプロパティを使用してこれが可能になりました。以下のこの質問からの回答CSSのパーセント幅と表のセルのテキストオーバーフロー

これはを使用して簡単に行えますtable-layout: fixedが、このCSSプロパティについて多くの人が知らないため、少し注意が必要です。

table {
  width: 100%;
  table-layout: fixed;
}

ここで更新されたフィドルで実際にそれを見てください：http : //jsfiddle.net/Fm5bM/4/

これは文字どおり1年後のことですが、共有したいと思いました。私は同じことをやろうとしていて、うまくいったこの解決策に出くわしました。テーブル全体の最大幅を設定し、希望の効果を得るためにセルサイズを操作しました。

テーブルを独自のdivに配置し、テーブル全体で必要に応じて、divの幅、最小幅、最大幅を設定します。次に、作業して他のセルの幅と最小幅を設定し、divの最大幅を効果的に前後に操作して、必要な最大幅を実現できます。

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

それからあなたのスタイルに入れてください：

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

確かに、これはセル自体の「最大」幅を提供しませんが、そのようなオプションの代わりに機能する可能性があるいくつかの制御を可能にします。それがあなたのニーズに合うかどうかわかりません。私は、ページのナビゲーション側をポイントまで拡大または縮小したいという状況で、最近のすべてのワイドスクリーンで機能したことを知っています。

パーセントは絶対サイズを基準にする必要があります。これを試してください：

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>