Question

我正在使用jQuery将元素添加到HTML表中：

＆＃13;

var tr = '<tr class="row">' +
    '<td><p class="vertical-text">hello</p></td>' +
    '<td><img src="https://dummyimage.com/200" /></td>' +
    '</tr>';

$('#tableX').append(tr);

＆＃13;

.vertical-text {
    padding-right: 5px;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

#tableX tr.row:hover {
    border: 1px solid grey;
}

table {
    display: block;
    width: 100%;
    border-collapse: collapse;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableX" align="center">
    <tr>
        <th>Name</th>
        <th>image</th>
    </tr>
</table>

＆＃13;

打开HTML文件时，垂直文本不会立即正确对齐，但是当悬停行时，它会更改其样式。它应该如何显示。
省略#tableX tr.row:hover规则时，它可以正常工作！

以下是一个扩展示例：https://jsfiddle.net/2cdpf28s/2/

修改

我发现这只是Safari中的一个错误，只有在使用:hover任何想法时才会出现？

Answer 1

此代码段存在两个问题。这里的"中有一个不需要的引用'<tr> <td">。

其次，在这种情况下，您需要向选择器添加#以引用DOM元素的ID（tableX中的$('tableX').append(tr);）。

＆＃13;

var tr = '<tr> <td><p class="vertical-text">' + "test" + '</p></td> </tr>';
$('#tableX').append(tr);

＆＃13;

.vertical-text {
  padding-right: 5px;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tableX' align="center">
  <tr>
    <th>Name</th>
  </tr>
</table>

＆＃13;

只有在Safari中悬停后，垂直对齐的文本才会立即正确格式化

1 个答案: