Question

是否可以将具有固定位置的表格单元格的内容右对齐？

请检查下面的演示 - 黄色的第三个盒子应该贴在白色容器的右侧，这是响应的。

请注意，必须保留固定位置和表格单元格。感谢

$scope.selectedTab

body {
  background-color: grey;
}
.container {
  width: 100%;
  background-color: white;
  margin: 0 auto;
  max-width: 80%;
}
table {
  width: 100%;
}
.first {
  ;
  position: fixed;
  background-color: red;
}
.second {
  width: 50%;
  background-color: black;
  color: white;
  text-align: center;
}
.third {
  text-align: right;
  position: fixed;
  background-color: yellow;
}

Answer 1

我知道你写道固定位置必须保留，但固定定位的表格单元是一个非常奇怪的概念，我希望这在每个浏览器中看起来都不同，因为固定定位元素的位置通常只与视口（窗口），在表格内无用。

在下面的解决方案中，我给出了第一个和第三个单元width: 25%，使它们的宽度与其内容无关，并将其内容放在span标签中，以使文本对齐工作没有背景颜色遍布整个细胞宽度。我希望这对你有用。

body {
  background-color: grey;
}
.container {
  width: 100%;
  background-color: white;
  margin: 0 auto;
  max-width: 80%;
}
table {
  width: 100%;
}
.first {
  width: 25%;
}
.first > span {
  background-color: red;
}
  .second {
  width: 50%;
  background-color: black;
  color: white;
  text-align: center;
}
.third {
  width: 25%;
  text-align: right;
}
.third > span {
  background-color: yellow;
}

<body>
  <div class="container">
    <table>
      <tr>
        <td class="first"><span>First</span></td>
        <td class="second">Second</td>
        <td class="third"><span>Third</span></td>
      </tr>
    </table>
  </div>
</body>

将固定定位的表格单元格的内容与右侧对齐？

1 个答案: