0

最初の列を右に、2番目の列を左に揃え、CSSで10pxを埋めるにはどうすればよいですか？

<table>
    <tbody>
        <tr><td align="right">Skype:</td><td align="left"> sent</td></tr>
        <tr><td align="right">Tel:</td><td align="left"> +343 343 4343</td></tr>
        <tr><td align="right">e-mail:</td><td align="left"> info@example.com</td></tr>
        <tr><td></td><td align="left"> example@gmail.com</td></tr>
    </tbody>
</table>

これが最も簡単ですが、すべてのブラウザ（特に古いバージョン）で機能するわけではありません。

/* While :first-child or :first-of-type (equivalent to this) could have been
 * used, :nth-of-type(n) is easier to change if you ever decide you want
 * different columns to be aligned */
tr td:nth-of-type(1) {
 text-align:right;
}
tr td:nth-of-type(2) {
 text-align:left;
 padding-left:10px;
}

ただし、とをに置き換え:nth-of-type(1)、各行の1番目と2番目にそれぞれとを追加することで、ブラウザのサポートが向上します。.first:nth-of-type(2).secondclass="first"class="second"<td>

すべてのセルにパディングを追加する場合は、次を追加するだけです。

td {
 padding:10px;
}
4

5 に答える 5

7

:first-child次のようにセレクターを使用できます。

td { padding: 10px }
td:first-child { text-align: right }

テーブルの位置合わせはもう必要ありません。

于 2012-04-07T20:51:11.370 に答える
5

これは最も簡単ですが、すべてのブラウザー (特に古いバージョン) で機能するとは限りません。

/* While :first-child or :first-of-type (equivalent to this) could have been
 * used, :nth-of-type(n) is easier to change if you ever decide you want
 * different columns to be aligned */
tr td:nth-of-type(1) {
 text-align:right;
}
tr td:nth-of-type(2) {
 text-align:left;
 padding-left:10px;
}

ただし、とをに置き換え:nth-of-type(1)、各行の 1 番目と 2 番目に と をそれぞれ追加すると、ブラウザーのサポートが向上します。.first:nth-of-type(2).secondclass="first"class="second"<td>

すべてのセルにパディングを追加する場合は、次を追加するだけです。

td {
 padding:10px;
}
于 2012-04-07T20:47:20.163 に答える
0

CSS

table td {
     padding: 10px;
}
.alignright {
     text-align: right;
}

HTML

<table>
     <tbody>
          <tr>
               <td>Skype:</td>
               <td>sent</td>
          </tr>
          <tr>
               <td>Tel:</td>
               <td class="alignright">+343 343 4343</td>
          </tr>
          <tr>
               <td>e-mail:</td>
               <td class="alignright">info@example.com</td>
          </tr>
          <tr>
               <td colspan="2">example@gmail.com</td>
          </tr>
     </tbody>
</table>
于 2012-04-07T20:47:30.303 に答える
0

外部スタイルシートのことですか？このような：

HTML

<table>
    <tbody>
        <tr><td class="right">Skype:</td><td class="left"> sent</td></tr>
        <tr><td class="right">Tel:</td><td class="left"> +343 343 4343</td></tr>
        <tr><td class="right">e-mail:</td><td class="left"> info@example.com</td></tr>
        <tr><td></td><td class="left"> example@gmail.com</td></tr>
    </tbody>
</table>

CSS

td {
    padding: 10px;
}
td.right {
    align: right;
}
td.left {
    align: left;
}
于 2012-04-07T20:48:12.923 に答える
0

私は通常、この情報を次のようにスタイル設定します。

<table>
    <tbody>
        <tr><td class="left">Skype:</td><td class="right"> sent</td></tr>
        <tr><td class="left">Tel:</td><td class="right"> +343 343 4343</td></tr>
        <tr><td class="left">e-mail:</td><td class="right"> info@example.com</td></tr>
        <tr><td class="left"> </td><td class="right padding"> example@gmail.com</td></tr>
    </tbody>
</table>



.left {float:left; padding-right:10px; width:50px; text-align:right;}

.right {float:left}

.padding {padding-left:60px;}

http://jsfiddle.net/R9YPF/

于 2012-04-07T20:56:48.290 に答える