html - 固定サイズの列

Question

テーブルを作成、入力、フォーマットする jQuery プラグインがあります。私はすでに作成と入力の権利を持っていますが、フォーマットはまだ私を逃れています.

テーブルの幅は常に 800 ピクセルです (生活をシンプルにするために、Web サイトをそのように設計しました。私はほとんど左脳派で、理解して作成できる芸術は音楽だけです)。ただし、列の数と個々のプロパティ (タイトル、幅、配置) は可変です。

$
.grid('MostSoldBySales', 'Most sold products by total sales', 112 /* height in px */, [
    {css: {'text-align': 'left',  width: 120/*px*/}, children: 'Description'},
    {css: {'text-align': 'right', width: 160      }, children: 'Total Sales'},
    {css: {'text-align': 'left',  width: 360      }, children: 'Comments'}
])
.grid('MostSoldByWeight', 'Most sold products by total weight', 112 /* height in px */, [
    {css: {'text-align': 'left',  width: 120/*px*/}, children: 'Description'},
    {css: {'text-align': 'right', width: 160      }, children: 'Total Weight'},
    {css: {'text-align': 'left',  width: 360      }, children: 'Comments'}
])
;

私の主な問題は、列の幅に関連しています。列を指定された幅と正確に一致させる方法がどうしても必要です。何らかの理由でブラウザが列のサイズを変更したくありません。それは Visual Basic でも提供されている機能だと思います。CSSを使用してそれを行うにはどうすればよいですか?

Answer 1

私が知っている確実な方法の 1 つは、各 TD 内に DIV を配置することです。TD に指定する幅は (最新のブラウザーでも) 提案としてのみ使用され、ウィンドウが狭すぎると列が押しつぶされます。したがって、これは常に厳密に 200px 幅になります。

<table>
  <tr>
    <td>
      <div style="width:200">Some stuff</div>
    </td>
  </tr>
</table>

Answer 2

実際には実用的ではありませんが、幅を二重引用符で囲み、！importantを追加してみてください。

{css: {'text-align': 'left',  width: "360px !important"      }, children: 'Comments'}

Answer 3

あなたの問題は、ブラウザに矛盾する次元を与えていることだと思います。要素は幅 800px に設定されていると言って<table>いますが、3 つの列を合計しても 640px しかありません。別の 160px をどこかに追加する必要があります。他の列セットでは、列幅の合計が 800px になるようにする必要があります。

で使用してみることができtable-layout: fixedます<table>。これにより、問題が強制的に発生し、テーブルとそのセルの間で発生する可能性のあるフィードバックが停止します。

Answer 4

使用してみることができます'min-width': '120px'