时间戳

首页 > 解决方案 > 嵌套单元格保持在右侧，而您可以在单元格左侧正常键入

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

问题描述

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

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

.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>

您在此代码段中也看不到它，因此您可以在下面看到它在网络上的样子。 在此处输入图像描述

您可以在下面找到我正在尝试完成的示例。在此处输入图像描述

谢谢你。

标签： htmlcsshtml-tablenestedcell

解决方案

我认为它只是归结为float:right在homeworkCategory课堂上使用......并从课堂上移除。white-space:nowrapplannerBox

也没有必要为那个“作业”准备一个完整的，所以把<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>

推荐阅读