javascript - table 的 td 中放一堆内容

更新

昨天发现我给 table 设置了一个 grid 类（自己写的），一直忘了这一点。

.grid {
    width: 100%;
}

.grid::before,
.grid::after {
    content: "";
    display: table;
    clear: both;
}

设置了这个之后 table-layout: fixed 设置后无法根据宽度设置宽度会失效。我去掉之后就可以设置了。

踩这个问题的人不知道是什么原因，为什么不先评论一下或者回答一下呢？我这里自己的确试了各种属性还没有解决才问的。

原问题

我在 table 的 td 中放一堆内容，内容是随便找一个网站的文章拷贝过来的。
大概的结构是这样的：

  

    
很长很长的内容
    
      
      var a = 10
      

      
    
    
很长很长的内容
  

然后 table 会自己扩展

如果设置 table 的 table-layout: fixed; 就能解决问题，但随之而来就有另一个问题：

我 table 的结构是这样的

  

    

      
thead
      
content
    
    

      
thead
      
content
    
  

如果设置了 fixed 就会让左右的 th 和 td 宽度一样，不知道该怎么解决这个问题呢？

谢谢各位的解答