动态改变 tr 的高度

Question

我正在创建一个包含 tasks/events 的日历。当我向 table 行添加更多事件时，我希望该行自动调整大小以适应内容，但事实并非如此。相反，内容溢出了行。

如果我删除我的 "events-wrapper" div，我可以解决这个问题，但我需要将我的事件包装在这个 div 中，这样我就可以将它们放在行中，这样它们就可以了添加更多时不会与日期重叠。

下面是代码。

HTML

<tr class="week">
    <td><div class="date">20</div></td>
    <td><div class="date">21</div></td>
    <td><div class="date">22</div></td>
    <td>
      <div class="date">23</div>
      <div class="events-wrapper">
          <div class="event">
            <span class="fa fa-check-square-o"></span>
            <p class="event-name">Test Event</p>
          </div>
          <div class="event">
            <span class="fa fa-check-square-o"></span>
            <p class="event-name">Test Event</p>
          </div>
      </div>
   </td>
</tr>

CSS

.week td{
  text-align: right;
  position: relative;
  font-size: 14px;
  padding: 2px 5px;
  width: 14.28%;
}
.week .date{
  position: absolute;
  top: 4px;
  right: 5px;
}
.events-wrapper{
  position:absolute;
  top:20px;
}
.event{
  width: 95%;
  height: 20px;
  border: 1px solid blue;
  background-color: lightblue;
  display: inline-block;
  top: 5px;
  position:relative;
  margin-bottom: 5px;
  padding-left: 5px;
  text-align: left;
}

.event .event-name{
  display:inline;
  font-weight:bold;
}

关于如何解决这个问题有什么建议吗？

Answer 1

如果我得到你。您对代码使用了绝对位置，因此元素不会有任何大小。您的 td 项目无法在 hi 内获得 2 个绝对 div 的大小，所以我 cahnges 代码并在 fiddle:

上给你

https://jsfiddle.net/1tt63h85/

变化：

.event{
position: static;
}

.week .date{
  position: static;
}

Answer 2

欢迎使用 Whosebug！

主要交易：不要这样做。

这里发生的事情有很多基本问题。马上，我 强烈推荐 拥有可以轻松轻松写入数据的东西。编辑标记是向日历添加数据的一种糟糕方式，可能会出现许多 unexpected/undesirable 结果。

无论如何，我不得不花几分钟来破解一些我认为可以向您展示您正在努力实现的目标。我为您制作了两个示例：一个简单的日历，其中日期运行ning 垂直（我从示例中假设您的目标是什么）和另一个更强大的日历（Guy Ytzhak 之前回答并假设您正在寻找让日期运行横跨屏幕）

这两个日历都不完整；它们只是工作示例（我设计的非常糟糕）向您展示如果我被迫按照您目前的方式构建这样一个脆弱的系统。

http://codepen.io/anon/pen/ZObOaR - 简单的垂直日期示例 http://codepen.io/anon/pen/oLjLoK - 可靠的水平日期示例

一些问题

您最初的布局和放置问题确实来自 table 的结构。您在纠正样式方面的尝试也进一步混淆了问题：

<tr class="week"> <!-- This is a row -->
<td><div class="date">20</div></td> <!-- (1st 'td') First Item in the row -->
<td><div class="date">21</div></td> <!-- (2nd 'td') Sits to the right of the 1st 'td'-->
<td><div class="date">22</div></td> <!-- (3rd 'td') Sits to the right of the 2nd 'td' -->
  <td> <!-- (4th 'td') Sits to the right of the 3rd item -->
    <div class="date">23</div>
    <div class="events-wrapper">
      <div class="event">
        <span class="fa fa-check-square-o"></span>
        <p class="event-name">Test Event</p>
      </div>
      <div class="event">
        <span class="fa fa-check-square-o"></span>
        <p class="event-name">Test Event</p>
      </div>
    </div>
  </td>
</tr> <!-- (Still the 4th 'td') Sits to the right of the 3rd item -->

核心 table 结构问题如上所示。（假设没有其他代码影响您提供的布局和布局）

应该发生什么：

table 的工作方式（在非常粗略和基本的意义上，重点关注 <table>、<tr> 和 <td>，而不用担心其他部分) 是它：

建立一个……嗯，一个table。 (<table> 标签) - 将其想象成一个包含框。
在上述 table.

<tr>

在所述行内建立任意数量的 table 个单元格（<td> 标记）。
重复第 2 步和第 3 步，直到不再有 <tr> 和 <td> 标签

这就是它应该如何工作的（大部分）。但是，您的代码试图强制行 (<tr>) 标签在列中显示其包含的单元格 (<td>) 标签，而不是一行，并且我看到您曾尝试通过 绝对定位 来做到这一点。不是一件好事。

重点是：

你能做一个这样的日历吗？是的。如果你努力的话，你可能会让它工作得很好。话虽如此，我觉得单独使用 HTML 和 CSS 不适合为该解决方案提供任何形式的可靠性，特别是如果您希望此东西在网络上具有交互性。您需要利用一些 javascript 库，例如 jQuery，为您提供所需的功能。然而，即便如此，用新事件、日期等来维护这个东西将是一件非常痛苦的事情，每次编辑都会花费很多时间。

日历旨在快速轻松地提供日程数据的可视化显示，这些数据可以轻松 changed/updated 即时进行。这不会做任何事情...... 我们甚至还没有讨论浏览器 support/device 兼容性。

我的推荐：

获取像 Wordpress 或 Drupal 这样的 CMS（如果您还没有使用的话）并在上面进行开发。您可以轻松下载大量精美的日历，这些日历效果非常好（有些效果不太好）。 CMS 可以节省您的时间，减少挫败感，并且您最终将能够创造出更好的东西。

希望这对您有所帮助，欢迎来到 Whosebug！ :)

动态改变 tr 的高度

Dynamically Change the Height of a tr

html

css

calendar

tablerow

主要交易：不要这样做。

一些问题

应该发生什么：

更多问题

更多问题（30% 的额外问题完全免费！）

重点是：

我的推荐：