Question

我正在尝试创建一个简单的响应表（仅包含一行）。

                <table style={{'width': '100%'}}>
                    <tr>
                        <th style={{'width': '25%', minWidth: 200, background: 'red'}}>25%</th>
                        <th style={{'width': '5%', minWidth: 40, background: 'blue'}}>5%</th>
                        <th style={{'width': '25%', minWidth: 200, background: 'red'}}>25%</th>
                        <th style={{'width': '17%', minWidth: 136, background: 'blue'}}>17%</th>
                        <th style={{'width': '17%', minWidth: 136, background: 'red'}}>17%</th>
                        <th style={{'width': '11%', minWidth: 88, background: 'blue'}}>11%</th>
                    </tr>
                </table>

因此，我的目标是在将窗口调整为较小尺寸时折叠行（每行）。

实际状态：

25% | 5% | 25% | 17% | 17 % | 11%

窗口调整大小时的预期状态

25%
---
5%
---
25%
---
17%
---
17%
---
11%

因此，如果有更好的方法（例如使用div），请告诉我如何做。

感谢您的帮助。（注意：我只有一行-因此我认为该表不是最佳的）

谢谢您的帮助。

（这是React语法）

Answer 1

不确定我是否理解正确，但是您可以简单地使用div并将flex ad flex-direction应用于父级，以及基本的媒体查询：

chart.legend.valueLabels.template.disabled = true;

广告将其应用于以下方面：

<div class="wrapper">
    <div style={{'width': '25%', minWidth: 200, background: 'red'}}>25%</div>
    ...
</div>

Answer 2

最好在设置每个id的{{1}}时使用内部或外部CSS。

检查以下内容：https://jsfiddle.net/dr42wqaz/

th

body {
  margin: 0;
  padding: 0;
}
#Mytable {
  width: 100%;
}
#Fth {
  width: 25%;
  min-Width: 200px;
  background: red;
}
#Sth {
  width: 5%;
  min-Width: 40px;
  background: blue;
}
#Tth {
  width: 25%;
  min-Width: 200px;
  background: red;
}
#FRth {
  width: 17%;
  min-Width: 136px;
  background: blue;
}
#FTth {
  width: 17%;
  min-Width: 136px;
  background: red;
}
#SXth {
  width: 11%;
  min-Width: 88px;
  background: blue;
}

当大小在调整大小时达到最小宽度时，如何折叠行表

2 个答案: