Question

假设我们有这张表：

<table>
  <tr>
    <td width="50px">Text crossing two td´s</td>
    <td width="50px"></td>
  </tr>
</table>

文本如何位于两个td之上并遵循tr的大小？

https://jsfiddle.net/roj7w1t4/

有可能吗？

修改
我需要边界保持可见。因此我不能使用colspan！
是否可以创建一个跨度并将其放在td上？

更加明白我想要做什么......这是我的应用程序的一个小例子：What printable element is better to use than linear-gradient?

元素

<div class="elementsDiv ui-draggable ui-draggable-handle" id="29065-1_105" data-weight="938" data-nr="105" style="width: 159.5px; height: 20px; position: absolute; left: 108px; top: 27.1875px;"><table style="height: 100%;"><tbody><tr style="border 1px solid black;"><td style="width: 34.2px; border-right: 1px dotted black;">105</td><td style="width: 91px; border-right: 1px dotted black;"></td><td></td></tr></tbody></table></div>

Answer 1

如何更改html布局？尝试使用after伪元素和position:absolute。我认为这种技术可以让我在很多情况下拯救我，而且非常强大。

div {
  border: 1px solid green;
  padding: 2px;
  position: relative;
  width: 150px;
}

div:after {
  background: green;
  bottom: 0;
  content: '';
  display: block;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 1px;
}

<div>
This text should cross two td´s
</div>

Answer 2

我可以成像的唯一方法是在表格外放置一个元素，并在表格和元素周围放置一个容器。然后使用绝对位置将元素放在表格顶部。

＆＃13;

div {
  width: 200px;
  position: relative;
}
table {
  width: 200px;
}
td {
    border: 1px solid red;
    height: 40px;
}
span {
  position: absolute;
  padding: 2px;
  z-index: 99;
}

＆＃13;

<div>
<span>Lorem ipsum dolor sit amet</span>
<table>
<tr>
  <td></td>
  <td></td>
</tr>
</table>
</div>

＆＃13;

Answer 3

＆＃13;

table {
  border: 1px solid black;
}

td {
  border: 1px solid red;
}

th {
  text-align:center;
}

＆＃13;

<table>
  <tr>
    <th colspan="2">Monthly Savings</th>
  </tr>
  <tr>
    <td width="50px">This text should cross two td´s</td>
    <td width="50px"></td>
  </tr>
</table>

＆＃13;

您可以包含边框将可见。祝一切顺利。如有任何疑问，请发表评论。

如何在两个表格单元格的顶部放置文本？

3 个答案: