嵌套单元格保持在右侧，而您可以在单元格左侧正常键入答案

【问题标题】：Have nested cell stay on right while you can type on the left of the cell normally嵌套单元格保持在右侧，而您可以在单元格左侧正常键入
【发布时间】：2021-12-13 19:07:10
【问题描述】：

我正在用 HTML 制作一个表格，我正在尝试使用它，以便标记为 homework 的框保持在单元格的右侧，用户可以在左侧键入，而不会移动框并将其弄乱。有没有办法让框保持在右上角，让用户能够在右侧输入约束，但仍然可以向下扩展框以溢出？

您可以在附件中找到我的代码的 sn-p。它应该包括您需要的一切，但如果您需要更多，请告诉我。谢谢。

.plannerBox {
    outline: 2px solid black;
    white-space: nowrap;
}
.homeworkCategory {
    color: white;
    background-color: gray;
    outline: 2px solid black;
}

<head>
    <meta charset='utf-8'>
    <title>Planner - My Digital Planner</title>
</head>
<body>
<table>
        <tr>
            <td class="plannerBox" id="iR2C2" contenteditable="true" placeholder="Work goes here."><table class="homeworkCategory"><td contenteditable="false">Homework</td></table>text would go here, and here, and here aswell</td>
      
      </table>

在这个 sn-p 中你也看不到它，所以你可以在下面看到它在网络上的样子。

您可以在下面找到我正在尝试完成的示例。

谢谢。

【问题讨论】：

对于 58 个单元格的 HTML，几乎所有这些都是重复的。你只需要看一个。
好的，我很快就完成了，并没有意识到那里有多少不必要的代码。我删除了几乎所有的代码。
这也不是严格的表格数据 imo。恕我直言，CSS-Grid 将是一个更好的解决方案。

标签： html css html-table nested cell

【解决方案1】：

我认为它可以归结为在 homeworkCategory 类上使用 float:right...并删除从 plannerBox 类中的 white-space:nowrap。

对于那个“作业”也不需要完整的<table>，所以把它换成一个简单的<span>

这是一个简单的浮动示例...

span {
  float:right;
  color:Red;
  border:1px solid red;
}

<table>
  <tr>
    <td>
      <span>hello world</span>
      hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world 
    </td>
  </tr>
</table>

【讨论】：

我非常感谢这个答案，但这几乎是完美的；我还有一个问题。我不能在 span 下有文字。
我不能在跨度下有文本...但不是跨度下的文本正是您的手绘图显示为要求的结果？？
很抱歉没有说清楚，我的意思是它不会让我在它下面放文字，它只是在跨度的左侧换行。
它不断将跨度推向右侧，文本和跨度之间的间隙很大。
@Robot123 - 删除 white-space: nowrap; 命令