Question

我有以下代码：

＆＃13;

body {
  background-color: #afafaf;
}

.content {
  width: 500px;
}

.rtl {
  direction: rtl;
}

table {
  width: 100%;
}

table tr td {
  color: #ffffff;
  position: relative;
}

.row-odd {
  background-color: #ff4e4e;
}

.row-even {
  background-color: #5bfc7a;
}

＆＃13;

<div class="content rtl">
  <table>
    <tr class="row-odd">
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr class="row-even">
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </table>
</div>

＆＃13;

在Firefox（版本：55/56/57/58）中，结果如下：

在Chrome中，我看到以下内容：

当TD单元具有＆＃34;位置：relative＆＃34;已分配属性，删除后，表将在两个浏览器中正确呈现。我需要这个＆＃34;位置：亲戚＆＃34;由于将使用的其他功能，表格单元格。

有人知道如何纠正这个问题吗？

Answer 1

我相信这是一个错误

https://jsfiddle.net/32e7sz2e/

table {
  width: 100%;
  border: 1px solid black;
}

table tr td {
  color: #ffffff;
  position: relative;
  border: 1px solid white;
}

我添加了一些边框来显示表格的位置，如果我检查并设置text-align，它会很有趣：对，表格会自行修正。可能是FF的某种显示问题。

如果您需要位置相对，则在单元格内添加包装并将其设置为相对

https://jsfiddle.net/32e7sz2e/1/

  <td>
    <div>
      Cell 1
    </div>
  </td>
  <td>
    <div>
      Cell 2
    </div>
  </td>

Answer 2

一种方法是在每个div内使用td并在其上应用position: relative。

body {
    background-color: #afafaf;
}
.tbl-container{
    height: 1px;
}
.content {
    width: 500px;
}
.rtl {
    direction: rtl;
}
table {
    width: 100%;
    height: 100%;
     position: relative;
}
table tr td {
    color: #ffffff;
}
td>div{
    position: relative;
    background: #99b;
    height:100%;
}
td>div>span{
    background:#257;
    border-radius:50%;
    width:20px;
    height:20px;
    left:20px;
    top:15px;
    position:absolute;
}
td{
    height:50px;
}
.row-odd {
    background-color: #ff4e4e;
}
.row-even {
    background-color: #5bfc7a;
}

<div class="tbl-container content rtl">
    <table>
        <tr class="row-odd">
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
        <tr class="row-even">
            <td><div>Cell 1 <span></span></div></td>
            <td><div>Cell 2 <span></span></div></td>
            <td><div>Cell 3 <span></span></div></td>
            <td><div>Cell 4 <span></span></div></td>
        </tr>
    </table>
</div>

Firefox与RTL和相关表格单元

2 个答案: