https://stackoverflow.com/questions/716442
-
23-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私の HTML ドキュメントには、2 つの列と複数の行からなる表があります。CSSで1列目と2列目の間のスペースを増やすにはどうすればよいですか?「margin-right:」を適用してみました。10px;" を左側の各セルに追加しますが、効果はありません。
解決
あなたの最初の<td>にこれを適用します：
padding-right:10px;
の のHTML例：のの
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>
他のヒント
警告の言葉：padding-rightはあなたの特定の（視覚的な）問題を解決するかもしれませんが、それはのテーブルセル間の間隔を追加するための正しい方法ではありません。セルのために何padding-rightそれは他のほとんどの要素のために何をするかのようになります。それはの内のスペースを追加するセル。細胞が離れてゲームを与える境界線や背景色や何かを持っていない場合、これはそうでないセルの間のスペースを設定した場合の効果を模倣することはできませんが。
誰かが指摘したように、マージンの仕様は表のセルは無視されます：
CSS 2.1仕様書 - 表 - 表の内容の視覚的なレイアウト
内部テーブル要素が生成します コンテンツを含む長方形のボックスと ボーダー。細胞は、同様にパディングを持っています。 内部テーブルの要素はありません 余白ます。
その後、「正しい」方法は何ですか？あなたがテーブルのcellspacing属性を置き換えるために探している場合は、（border-spacing無効になっている）border-collapseは代替品です。セル当たりの「余白」が必要とされる場合は、私はそれが正しくCSSを使用して達成することができるかわかりません。私が考えることができる唯一のハックは、このようなスタイリングを実現するために、上記のようpaddingを使用する細胞の任意のスタイリング（背景色、境界線など）を回避し、代わりに、細胞内のコンテナdivを使用することである。
私は、CSSの専門家ではないですので、私はうまく上記に間違っている可能性が（知っているのは素晴らしいだろうこれ！私もテーブルセルのマージンCSSのソリューションをしたいと思います）。
乾杯！
あなたはパディングを使用できない場合（たとえば、あなたがTDで国境を持っている）。
このを試してみてくださいtable {
border-collapse: separate;
border-spacing: 2px;
}
私は、これは非常に遅れている実感が、記録のために、あなたはまた、このCSSは、すべての行の最初の列にパディングを適用する（インラインスタイルの必要性を排除する。）これを実行するためにCSSセレクタを使用することができます：
table > tr > td:first-child { padding-right:10px }
これはあなたのHTML、サンセリフのCSSのようになります。！
<table><tr><td>data</td><td>more data</td></tr></table>
これは特に、あなたがCSSで特定の書式の多くを行う必要がある場合には、はるかにエレガントなマークアップが可能になります。
マージンは、個々の細胞で、残念ながら動作しません、しかし、あなたが間...別のオプションスペースを入れたい二つのセルの間の余分な列を追加することができ、背景と同じ色で境界線を使用することです...
あなたは単にそれを行うことができます：
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>
いいえCSSはこの10pxのは、あなたのスペースです:)必要ありません。
padding-rightを試してみてください。あなたは、セル間margin年代を置くために許可されていない。
<table>
<tr>
<td style="padding-right: 10px;">one</td>
<td>two</td>
</tr>
</table>
使用する 境界線の折りたたみ:別; テーブルの側面ではなく、テーブルのセル間のマージンが必要なだけなので、私には機能しませんでした。
私は次の解決策を思いつきました。
-CSS
.tableDiv{
display: table;
}
.cellSeperator {
display: table-cell;
width: 20px;
}
.cell1 {
display: table-cell;
width: 200px;
}
.cell2 {
display: table-cell;
width: 50px;
}
-HTML
<div class="tableDiv">
<div class="cell1"></div>
<div class="cellSeperator"></div>
<div class="cell2"></div>
</div>
tdとborder両方が必要paddingさんのためのこのソリューションの仕事。
（クロム32、IE 11は、Firefox 25でテスト）
CSS:
table {border-collapse: separate; border-spacing:0; } /* separate needed */
td { display: inline-block; width: 33% } /* Firefox need inline-block + width */
td { position: relative } /* needed to make td move */
td { left: 10px; } /* push all 10px */
td:first-child { left: 0px; } /* move back first 10px */
td:nth-child(3) { left: 20px; } /* push 3:rd another extra 10px */
/* to support older browsers we need a class on the td's we want to push
td.col1 { left: 0px; }
td.col2 { left: 10px; }
td.col3 { left: 20px; }
*/
HTML:
<table>
<tr>
<td class='col1'>Player</td>
<td class='col2'>Result</td>
<td class='col3'>Average</td>
</tr>
</table>
を更新しました2016 の
Firefoxは今inline-blockとセットwidthせずにそれをサポートします。
table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }
/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }<table>
<tr>
<td>Player</td>
<td>Result</td>
<td>Average</td>
</tr>
</table>
<div class="table">
<div class="tr">
<div class="td">Player</div>
<div class="td">Result</div>
<div class="td">Average</div>
</div>
</div>
あなたはその方法で、セル内の個々の列を選び出すことができません。私の意見では、あなたの最良のオプションは、2列目style='padding-left:10px'を追加し、内部のdivまたは要素にスタイルを適用することです。この方法であなたは大きなスペースの錯覚を達成することができます。
あなたがテーブルの幅の制御を持っている場合は、パディング左表のすべての細胞に挿入し、負のmargin-left全体テーブルの上を挿入します。
table {
margin-left: -20px;
width: 720px;
}
table td {
padding-left: 20px;
}
注、テーブルの幅は、パディング/マージン幅を含める必要があります。一例として、上記を使用して、表のビジュアル幅は700pxになります。
あなたがテーブルのセルに境界線を使用している場合は、これが最善の解決策ではありません。
解決
この問題を解決する最善の方法は、試行錯誤と、目の前に書かれたものを読むことの組み合わせであることがわかりました。
ご覧のとおり、かなりトリッキーなことが起こっています...しかし、見た目を良くするための主な鍵は次のとおりです。
親要素 (UL):境界線の折りたたみ:別;境界線の間隔:.25em;左マージン:-.25em;
子要素 (LI):画面：テーブルセル;垂直整列:真ん中;
HTML
<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>
CSS
ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }
余白の代わりに境界線を設定するCianのソリューションに続いて、私はあなたが色の背景と一致することを避けるために透明に境界線の色を設定することができます発見しました。 FF17、IE9、クロームV23で動作します。あなたは、実際の境界線を必要としない提供まともな解決策のように思える。
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
パディングを使用すると、それを行うための正しい方法ではない、それは外観を変更することがありますが、それはあなたが望んだものではありません。これはあなたの問題を解決することがあります。
あなたはそれらの両方を使用することができます：
padding-right:10px;
padding-right:10%;
しかし、それはの％のを使用することをお勧めします。
、周りの他の作品は、余分な列を追加し、<colgroup>を使用して幅を経由してマージンを設定することです。私は、セルの境界線自体に余裕を与えるためにしようとしていたとして、上記パディングソリューションのどれも私のために働いていなかった、これは終わりでは問題を解決するものである。
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>
を使用して、表のセルの境界をスタイル。
table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }
