2行目のtdを右に押し込む方法は？私は単純にもう1つ空のtdを追加することができますが、私はよりクリーンなマークアップを作りたいと思います。それを避けるためのCSS属性はありますか？余分なマークアップなしで右にtdを押してください
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>$100</td>
</tr>
</table>を試してみてください匿名のテーブルセルとしてレンダリングされるため、マークアップと同じ方法で既存のテーブルセルを右にプッシュします。
table, th, td {
border: 1px solid black;
}
table tr:nth-child(3):before {
content: '';
}<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>$100</td>
</tr>
</table>これは[再利用可能なクラスに変換する]（https://jsfiddle.net/1gegam7u/）です： '.shim：before {content： ''; } '。次に右側にshimmedの 'td'が必要な各 'tr 'に適用します。私は個人的に空の 'td'が適切な選択だと感じていますが。 – hungerstar
@hungerstarはい、そのクラスをマークアップに追加したい場合は、1つ（良い考えです）。空の 'td'を使用することで、マークアップ/コードフローを読みやすくなります。 – LGSon
$ 100セルの前に余分な<td></td>を生成することであろう最善の方法。あなたは余分な<td></td>を使用していないと主張した場合、あなたは擬似要素で、このように、CSSだけで、ここに何が起こるのマークアップには変化
は擬似がそれをレンダリングするときということではないことを行うことができます<td colspan="2" style="text-align:right;">$100</td>
コメント内ですでに共有されているすべての回答を統合してくれてありがとう – WillardSolutions
問題はありません@EatPeanutButterは投稿後に更新されませんでした。 – EliTownsend
は 'COLSPAN = '2''を追加しますか？ – WillardSolutions
私は空の 'td'がここでは適切だと思って、実際に_" cleaner "_マークアップというコンセプトに違反することはないと思っています。ラベル/ヘッダーが明確に定義された2つの列があります。私があなたのマークアップを見るとき、私はその月が$ 100であると考えています。これは直観に反するものであり、作者の間違いです。空の 'td'を使用すると、前の月のデータを続ける可能性があるように空であるという理由があると仮定できます。空の 'td'は2番目の' $ 100' 'td'を適切なコンテキスト/カラムに置きます。 – hungerstar
さらに、クリーンなマークアップはどういう意味ですか？空の ''が他のどの種類のCSSマジックよりも直感的です – WillardSolutions