除非表格布局：固定，否则无法将表格宽度设置为 100%，但是表格单元格宽度是固定的

Question

我在文章标签中有一个表格。我希望桌子是 100% 宽的。当文章变窄时，表格应该缩小。

当表具有 css 属性 table-layout: fixed 时，这有效。 问题是，表格单元格不再根据内容调整宽度。

不可能两者兼得吗？

案例：

• 1. 表格布局已修复 表格将其宽度调整为父宽度，但单元格的宽度相同，无论内容如何。 代码：https://jsfiddle.net/7yLswLg9/14/。 全屏：https://jsfiddle.net/7yLswLg9/14/embedded/result/
• 2. 表格布局不固定 该表不会将其宽度调整为父级。单元格使宽度适应内容。 代码：https://jsfiddle.net/7yLswLg9/13/ 全屏：https://jsfiddle.net/7yLswLg9/13/embedded/result/

希望的场景：单元格宽度适应内容，表格宽度适应父级，如果需要可以缩放。

Answer 1

似乎您只是缺少小提琴中每个 img 上的“显示：块”属性。

看看这个（将 img 样式移到一个名为“img-responsive”的类中）

.img-responsive {
    display: block;
    max-width: 100%;
    height: 100%;
}

https://jsfiddle.net/7yLswLg9/20/