table 的 td 中放一堆内容

Question

更新

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

.grid {
    width: 100%;
}

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

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

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

原问题

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

<td>
  <div>
    <p>很长很长的内容</p>
    <pre>
      <code>
      var a = 10
      <br>
      </code>
    </pre>
    <p>很长很长的内容</p>
  </div>
</td>

然后 table 会自己扩展

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

我 table 的结构是这样的

<table>
  <tbody>
    <tr>
      <th>thead</th>
      <td>content</td>
    </tr>
    <tr>
      <th>thead</th>
      <td>content</td>
    </tr>
  </tbody>
</table>

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

谢谢各位的解答

Answer 1

可以在右边的th上单独设置一个宽度~