如何讓一個表格行上的div（綠線）繼續到下一個

Question

我試圖創建一個簡單的日程表日曆。在事件跨越多天的情況下，我無法獲得一行表格div中的事件（綠線），以繼續下一行。如附圖所示 Calendar

請幫忙。代碼：JS.do

Answer 1

A <div>永不換行，它總是矩形的。您必須使用兩個<div> s。

例子：

<div>Before</div> 
<div> 
    ... your content here ... 
</div> 
<div>After</div> 

Answer 2

使用第二<div>，然後你可以做任何你想要的。例如：

<table> 
 
\t <thead> 
 
    \t <tr> 
 
    \t \t <th style="height:10px; width:100px">Monday</th> 
 
      <th style="height:10px; width:100px">Tuesday</th> 
 
      <th style="height:10px; width:100px">Wednesday</th> 
 
      <th style="height:10px; width:100px">Thursday</th> 
 
      <th style="height:10px; width:100px">Friday</th> 
 
      <th style="height:10px; width:100px">Saturday</th> 
 
      <th style="height:10px; width:100px">Sunday</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    \t <tr> 
 
     \t <td><div style="height:100px; width:100px; background-color:red; ">1 
 
      \t <div style="height:10px; width:1000px; background-color:green;"></div> 
 
      </div></td> 
 
      <td><div style="height:100px; width:100px">2</div></td> 
 
      <td><div style="height:100px; width:100px">3</div></td> 
 
      <td><div style="height:100px; width:100px">4</div></td> 
 
      <td><div style="height:100px; width:100px">5</div></td> 
 
      <td><div style="height:100px; width:100px">6</div></td> 
 
      <td><div style="height:100px; width:100px">7</div></td> 
 
     </tr> 
 
     <tr> 
 
     \t <td><div style="height:100px; width:100px"> 
 
       8 
 
       <div style="height:10px; width:1000px; background-color:green;"></div> 
 
       </div></td> 
 
      <td><div style="height:100px; width:100px">9</div></td> 
 
      <td><div style="height:100px; width:100px">10</div></td> 
 
      <td><div style="height:100px; width:100px">11</div></td> 
 
      <td><div style="height:100px; width:100px">12</div></td> 
 
      <td><div style="height:100px; width:100px">13</div></td> 
 
      <td><div style="height:100px; width:100px">14</div></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<script></script>

Answer 3

更新：

在每天的多個事件的多個底部邊框的情況。

Fiddle

原文：

你的方法，你不能得到你所需要的。我更改了一下你的代碼，我希望這就是你需要的。

Fiddle

<style> 
table { 
    border-collapse: collapse; 
} 

td { 
    border-bottom: 10px solid white; 
    width:100px; 
    height:80px; 
    vertical-align: top; 
} 

th { 
    height:10px; 
    width:100px; 
} 

.red { 
    background-color: red; 
} 

.event { 
    border-bottom-color: green; 
} 
</style> 
<table> 
    <thead> 
     <tr> 
      <th>Monday</th> 
      <th>Tuesday</th> 
      <th>Wednesday</th> 
      <th>Thursday</th> 
      <th>Friday</th> 
      <th>Saturday</th> 
      <th>Sunday</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="red event">1</td> 
      <td class="event">2</td> 
      <td class="event">3</td> 
      <td class="event">4</td> 
      <td class="event">5</td> 
      <td class="event">6</td> 
      <td class="event">7</td> 
     </tr> 
     <tr> 
      <td class="event">8</td> 
      <td class="event">9</td> 
      <td>10</td> 
      <td>11</td> 
      <td>12</td> 
      <td>13</td> 
      <td>14</td> 
     </tr> 
    </tbody> 
</table>