2


1

HTMLのテーブル行のテーブルデータ間のスペースを削除するにはどうすればよいですか?

HTMLのテーブル行のテーブルデータ間の余分なスペースを削除する方法を見つけようとしています。 たとえば、以下のコードでは、WebブラウザIEでコードを表示するときに、「名」テーブルデータと「入力名」テーブルデータの間に余分なスペースがあります。 これがその例です。

First Name:

入力テキストボックスをカテゴリに合理的に近づける必要があります(つまり、「名」)。 私はテーブルの境界線、2のセルパディング、65%の幅を含める必要があり、それがコードにリストされているので、これを実現しています。

これらの要件を維持しながら、必要な外観(2つのテーブルデータフィールド間の最小スペース)を取得するにはどうすればよいですか? 任意の助けは大歓迎です。 ありがとうございます。

これが私のコードです:

        Personal Information

ファーストネーム:

苗字:

住所:

シティ:

状態:

郵便番号:

国:

6 Answer


1


セルの間隔を制御するには、CSSを使用する必要があります。

以下に、例を含む優れたチュートリアルを示します。


1


...


1


左側の列の幅を調整して、最長のエントリと同じ幅になるようにすると仮定します。 これは実際には興味深い質問です。

私が普段していること:

  • 左側の列に `white-space:nowrap`スタイル属性を与えます

  • 右側の列に、それよりわずかに大きい幅を与えます be_、たとえば 多分「70%」。 それは試してみることの問題です。

その結果、右側の列は、幅が指定されていない左側の列に対して「押し」ます。 左側の列は、コンテンツの長さの点のみを示します。

私は過去8年間見落としていた、これに対する他のよりクリーンな解決策があるかどうかに興味があります:)

コード例:

 Label

入力

最初の行の幅を設定するのに十分なはずです。


1


まず、 th`に colspan = "2" `を追加します。

    Personal Information

これがないと、「th」はその下の「td」を不必要に引き伸ばします(つまり、 左の列)。 `colspan =" 2 "`は、テーブル全体の幅にわたって `th`を引き伸ばします。 これにより、問題の少なくとも一部が修正され、「td」が互いに近づけられるはずです。 それでも十分でない場合は、左の列の固定幅を定義できます。たとえば、次のように、その中の「td」のいずれかに「width」属性を設定します。

    Personal Information

ファーストネーム:

苗字:

さらに良いことに、ピクセルではなくCSSを使用してセルの幅をフォントサイズに合わせて変更できるように、CSSを使用して幅を設定します。

    Personal Information

ファーストネーム:

苗字:

値「200」と「10em」は単なる例であり、最適な値を見つけるには少し実験する必要があります。


1


最初の列のテキストを右揃えする必要があるようです。 あなたはこれのようにそれをすることができます:


またはCSSと


スタイルは次のとおりです。

.label {
  text-align:right;
}


1


CSSでは:

td {
  padding: 0;
  margin: 0; /** or whatever pixel you prefer **/
}

table {
  white-space: nowrap;   /** I don't know if this will help, just giving solutions **/
}

そしてあなたのHTMLのために

       First Name: