HTML - 查看更多评论会破坏所有表格

Question

我做了一个页面。用户看到评论。 当他们点击“devam”网址时。他们看到更多与评论有关。

但是这打破了桌子。我想要的是它只改变相关的评论宽度和高度。我怎么能这样做？

Answer 1

问题在于它正在扩展单元格并导致其他单元格的文本包装....在前两个单元格上使用此样式：

<td style="white-space: nowrap;">...</td>

或者，明确地为它们设置宽度，即：

<td style="width:200px">...</td>

Answer 2

也许这就是你要找的东西 http://jsbin.com/ejecij/2/edit

  <style>
      .date_col,.movie_col,.descr_col {
          height:50px;
      }
      .date_col{width:66px}
      .movie_col{width:100px}
      .descr_col{width:300px}

      .full_descr_col{
          width:300px;
          height:150px;
      }
  </style>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        init_links();
    });

    function init_links() {

        $(".descr_col>a.fulltext").unbind().click(function() {
            $(this).parents("td").attr("class","full_descr_col");
            init_links();
        });
        $(".full_descr_col>a.fulltext").unbind().click(function() {
            $(this).parents("td").attr("class","descr_col");
            init_links();
        });

    }
</script>

<table border=1>
    <tr>
        <td class="date_col">date</td>
        <td class="movie_col">movie</td>
        <td class="descr_col">description</td>
    </tr>
    <tr>
        <td class="date_col">date</td>
        <td class="movie_col">movie</td>
        <td class="descr_col">

            description

            <a href="#examplelink" class="fulltext">examplelink</a>
        </td>
    </tr>
    <tr>
        <td class="date_col">date</td>
        <td class="movie_col">movie</td>
        <td class="descr_col">description</td>
    </tr>
    <tr>
        <td class="date_col">date</td>
        <td class="movie_col">movie</td>
        <td class="descr_col">description</td>
    </tr>
</table>