如何根据窗口大小对表格单元格进行换行

Question

我正在使用与智能手机兼容的Bootstrap 4做一个Web项目。我需要做的表格是：
1.当窗口宽度变小时，表格单元格应换行。
2.与智能手机相同。如果智能手机屏幕没有足够的空间来显示页面，表格单元格应该换行。

这就是我想进入的：https://www.w3schools.com/css/tryit.asp?filename=trycss_float_boxes(但带有表格单元格(

下面的示例代码是我尝试执行上述操作。

我尝试过的解决方案：
- <div style="float:left;">
- <table style="table-layout:fixed;">与<td style="word-wrap:break-word;">

但这些不会影响任何事情。

<div class="container-fluid">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="a.jpg"></img></td>
      <td><img src="b.jpg"></img></td>
      <td><img src="c.jpg"></img></td>
    </tr>
  </table>
</div>

更新：谢谢大家。我已经解决了这个问题。感谢您的回答和帮助:)

Answer 1

使用媒体查询，当低于 768px 时，请使用 display:grid...这将给你你想要的效果

下面的代码片段：

@media screen and (max-width:768px) {
  tr {
    display: grid
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/JumboMob.jpg"></img>
      </td>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/JumboMob.jpg"></img>
      </td>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/JumboMob.jpg"></img>
      </td>
    </tr>
    <tr>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/Jumbo.jpg"></img>
      </td>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/Jumbo.jpg"></img>
      </td>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/Jumbo.jpg"></img>
      </td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[e-mail]</td>
    </tr>
  </tbody>
</table>

Answer 2

请尝试这个.. 它可能会起作用..

.css

<style type="text/css">
    img {
        max-width: 100%;
        height: auto;
    }
    @media only screen and (max-width: 767px) {
        td {
            display: block;
        }
    }
</style>

Answer 3

我建议阅读这个答案，它从排序上告诉表格行被设计为仅在水平单元格中，但是您可以实现您想要的 IFF，您可以使用div 或其他元素代替。当您使用引导程序 4 时，我建议您使用引导网格或遵循下面给出的此示例：

<div class="container-fluid">     
    <div class="row">
      <div class="col-sm">col-sm</div>
      <div class="col-sm">col-sm</div>
      <div class="col-sm">col-sm</div>
    </div>
 </div>

这里假设总宽度为 12 个单位，可以使用 col-(screen(-(n( 作为列的类名，其中：

• col-(n( 表示宽度 <576px
• col-sm-(n( 表示宽度> 576px
• col-md-(n( 表示宽度> 768px
• col-lg-(n( 表示宽度> 992px
• col-XL-(n( 表示宽度> 1200px
• (n( 可以是 1-12 之间的任何数字，但应注意总金额不超过 12