Question

背景：我是HTML / CSS的新手，目前正在使用Markdown构建一个基本网站。

我查看过StackOverflow上的帖子，但无法回答我的具体问题。

我有一张基本表：

.mytable {
border: 1px solid #ccc;
background-color: white;

th {
 padding: 2px;
 height:40px;
 color: #ffffff;
 background-color: #4c4c4c;
 }

td {
   padding: 2px;
   text-align:center; 
   vertical-align:middle;
   border:1px solid #f1eaf2;
}

tr:nth-child(odd){background-color: #efefef}
}

但是，在一张桌子上，我想将文本对齐。我尝试了一些内联样式，即<td align="right" important!>，但这不起作用。所以，我想知道是否可以在同一个<td>类中有两个不同的<table>。

如果没有，我确实在StackOverflow上找到了我将创建两个不同的表类的地方。

感谢您的帮助。

Answer 1

是的，您可以在同一个表格中以不同方式对齐2列中的文本。诀窍是将text-align: right应用于第二个<td>元素。有几种方法可以做到这一点，在下面的示例中，我使用了td:last-child选择器。

.mytable {
  border: 1px solid #ccc;
  background-color: white;
}
.mytable th {
  padding: 2px;
  height: 40px;
  color: #ffffff;
  background-color: #4c4c4c;
}
.mytable td {
  padding: 2px;
  text-align: center;
  vertical-align: middle;
  width: 100px;
  border: 1px solid #f1eaf2;
}
.mytable td:last-child {
  text-align: right;
}
.mytable tr:nth-child(odd) {
  background-color: #efefef
}

<table class="mytable">
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td>1A</td>
    <td>1B</td>
  </tr>
  <tr>
    <td>2A</td>
    <td>2B</td>
  </tr>
  <tr>
    <td>3A</td>
    <td>3B</td>
  </tr>
</table>

使用表时，是否可以为一个类使用两个选择器？

1 个答案: