如何在包含大量内容的表格中加入TD

时间:2015-07-23 10:16:09

标签: html css

点击"点击内容"将显示和隐藏最后一个TD内的内容。 但是TD并不适合表格。如何解决这个问题。

<table>
  <tr>
    <td>test td 1</td>
    <td>test td 2</td>
    <td>test td 3</td>
    <td>test td 4</td>
    <td>test td 5</td>
    <td>Click for content</td>
    <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar nisi sit amet luctus efficitur. Vivamus eu risus suscipit, ultricies tortor eu, sodales tellus. Sed sed feugiat massa. Cras mollis, erat eget pellentesque porttitor, mauris lectus ultricies neque, varius iaculis quam mi et quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc egestas nec mi eu lobortis. Nam eu scelerisque orci. Mauris vel ultricies dui, non accumsan turpis. Aliquam pulvinar in dolor sit amet fringilla. Integer sed quam pellentesque, volutpat arcu a, feugiat nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor ac nulla sit amet suscipit.
    </td>
  </tr>
</table>

小提琴:http://jsfiddle.net/rngapLze/

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
tr td {
  border: 1px solid red;
  background: #eaeaea;
}
&#13;
<table>
  <tr>
    <td class="item-big" colspan="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar nisi sit amet luctus efficitur. Vivamus eu risus suscipit, ultricies tortor eu, sodales tellus. Sed sed feugiat massa. Cras mollis, erat eget pellentesque porttitor, mauris
      lectus ultricies neque, varius iaculis quam mi et quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc egestas nec mi eu lobortis. Nam eu scelerisque orci. Mauris vel ultricies dui, non accumsan turpis. Aliquam pulvinar in dolor
      sit amet fringilla. Integer sed quam pellentesque, volutpat arcu a, feugiat nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor ac nulla sit amet suscipit.</td>
  </tr>
  <tr>
    <td class="item0">test td 1</td>
    <td class="item1">test td 2</td>
    <td class="item2">test td 3</td>
    <td class="item3">test td 4</td>
    <td class="item4">test td 5</td>
  </tr>
</table>
&#13;
&#13;
&#13;