0

如何将第一列向右对齐，第二列向左对齐并用 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>

它不是真正的 Scala 相关，它更多的是浮点算术问题。首先，当与它进行比较时Int，Double它会Int转换为Double（总是安全的）。第二种情况很明显——价值观不同。

第一种情况发生的情况是该Double类型无法存储那么多有效数字（在您的情况下为 17，64 位浮点最多可以存储 16 个十进制数字），因此它将值四舍五入为1. 和1 == 1。

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)为，并将和分别添加到每行的第一个和第二个，您将获得更好的浏览器支持。.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 回答