在表格內格式化可折疊

Question

這是參考我昨天發布的關於可折疊的問題，我遇到了間距問題（如果我做錯了，可能會格式化）。

如果我希望可折疊部分下方的所有對象垂直顯示在列表中，我的所有編碼都可以正常工作。 它們通常間隔在一張表格中，例如下面的表格，因此它們可以根據需要在頁面上垂直向下移動三個。 這出現在我的 jfiddle 中，但不起作用。 它似乎“反彈”，但實際上並未折疊或展開內容，而且我不是 100% 確定如何修復它。

 $('.expand-two').click(function() { $('.content-two').slideToggle('slow'); });

 p.content-one { display: block; } p.content-two { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="0" width="750"> <tr> <td align="center" colspan="3"> <p class="expand-two"> <a href="#"></a> <img src="https://www.mywebsite.net/random/creative.png"><br><br></p> </td> <tr> <p class="content-two"> <td width="33%" align="center" valign="top"> <a href="http://www.mywebsite.net/random/sinnerssaints" title="Sinners and Saints: Room Leader OMEGA"> <font color="#34a6a7">[ chaos ]</font> </a><br> <font color="#34a6a7">$ROOMNAME sinnerssaints$</font><br>$USERLIST sinnerssaints$<br> </td> <td width="33%" align="center" valign="top"> <a href="http://www.mywebsite.net/random/sagas_untold" title="Saga's Untold: Room Leader AETERNUM"> <font color="#34a6a7">[ realities ]</font> </a><br> <font color="#34a6a7">$ROOMNAME sagas_untold$</font><br>$USERLIST sagas_untold$<br> <font size="-1" color="#CFA06B"><i>$ROOMNAME sagbloodonthemarble$</i></font><br>$USERLIST sagbloodonthemarble$<br> <font size="-1" color="#CFA06B"><i>$ROOMNAME sagasvalar$</i></font><br>$USERLIST sagasvalar$<br> </td> <td width="33%" align="center" valign="top"> <a href="http://www.mywebsite.net/random/parabellum" title="Parabellum: Room Leader COVET"> <font color="#34a6a7">[ warzone ]</font> </a><br> <font color="#34a6a7">$ROOMNAME parabellum$</font><br>$USERLIST parabellum$<br> </td> </p> </tr> </tr> </table>

工作小提琴https://jsfiddle.net/zwom1ba0/

編輯

我的意思是我的行是這樣布置的

item 1             item 2             item3
item 4             item 5             item6

等等，但是當放在沒有表格編碼的 div 中時，一切正常，但每個 div 中的項目只是看起來像

"item1"
"item2"
"item3"
"item4"

等等

Answer 1

問題是<p class="content-two">在<tr> -> <td>

<tr> HTML 元素定義表格中的一行單元格。 然后可以使用<td> （數據單元格）和<th> （標題單元格）元素的混合來建立行的單元格。

此外，您的第一個<tr>標簽沒有用</tr>關閉，然后是另一個<tr>

建議的解決方案：

將兩個表格行拆分為兩個表格，以便第二部分可以應用滑動效果。

<table border="0" width="750">
  <tr>
    <td align="center" colspan="3">
      <p class="expand-two">
        <a href="#"></a> <img src="https://www.mywebsite.net/random/creative.png"><br><br></p>
    </td>
  </tr>
</table>
<div class="content-two">
  <table border="0" width="750" >
    <tr>
      <td width="33%" align="center" valign="top">
        <a href="http://www.mywebsite.net/random/sinnerssaints" title="Sinners and Saints: Room Leader OMEGA">
          <font color="#34a6a7">[ c h a o s ]</font>
        </a><br>
        <font color="#34a6a7">$ROOMNAME sinnerssaints$</font><br>$USERLIST sinnerssaints$<br>
      </td>
      <td width="33%" align="center" valign="top">
        <a href="http://www.mywebsite.net/random/sagas_untold" title="Saga's Untold: Room Leader AETERNUM">
          <font color="#34a6a7">[ r e a l i t i e s ]</font>
        </a><br>
        <font color="#34a6a7">$ROOMNAME sagas_untold$</font><br>$USERLIST sagas_untold$<br>
        <font size="-1" color="#CFA06B"><i>$ROOMNAME sagbloodonthemarble$</i></font><br>$USERLIST sagbloodonthemarble$<br>
        <font size="-1" color="#CFA06B"><i>$ROOMNAME sagasvalar$</i></font><br>$USERLIST sagasvalar$<br>
      </td>
      <td width="33%" align="center" valign="top">
        <a href="http://www.mywebsite.net/random/parabellum" title="Parabellum: Room Leader COVET">
          <font color="#34a6a7">[ w a r z o n e ]</font>
        </a><br>
        <font color="#34a6a7">$ROOMNAME parabellum$</font><br>$USERLIST parabellum$<br>
      </td>
    </tr>
  </table>
</div>