如何使 HTML 表格响应式？

问题描述 投票：0回答：1

现在因为我的表格有很多列，表格的右侧溢出到屏幕之外。我想让它具有响应能力，以便表格将其自身包装在下面以显示更多列。我希望表行作为一个单元包装在一起（标题和数据在一起）。 在这张图片中可以观察到溢出

我一直在寻找解决方案，但我得到的唯一响应解决方案是，添加一个水平滚动条

overflow-x: auto
并使其水平响应。但我不想应用这个。

我想知道是否可以用桌子包裹。

这就是我想要的桌子包裹方式

我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inquiry Confirmation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #ffffff;
            color: #ffffff;
        }

        .container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            background-color: #231F20;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            color: #000000;
        }

        .logo {
            text-align: center;
            margin-bottom: 20px;
        }

        .content {
            padding: 20px;
            font-size: 12px;
            color: white;
        }

        .content h2 {
            color: #ffffff;
            font-size: 14px;
        }

        .content table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .content table,
        .content th,
        .content td {
            border: 1px solid #ddd;
        }

        .content th,
        .content td {
            padding: 8px;
            text-align: left;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="logo">
            <img src="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg" alt="Logo"
                width="200">
        </div>
        <div class="content">
            <table>
                <thead></thead>
                <tbody>
                    <tr>
                        <th>Dep. Date</th>
                        <th>Dep. Time</th>
                        <th>Aircraft</th>
                        <th>From</th>
                        <th>To</th>
                        <th>PAX</th>
                        <th>Tour Type</th>
                        <th>Tour Type 2</th>
                        <th>Tour Type 3</th>
                        <th>Tour Type 4</th>
                        <th>Tour Type 5</th>
                        <th>Tour Type 6</th>
                    </tr>
                    <tr>
                        <td>##DATE##</td>
                        <td>##TIME##</td>
                        <td>##AIRCRAFT_TYPE##</td>
                        <td>##FROM##</td>
                        <td>##TO##</td>
                        <td>##PAX##</td>
                        <td>##TourType##</td>
                        <td>##TourType 2##</td>
                        <td>##TourType 3##</td>
                        <td>##TourType 4##</td>
                        <td>##TourType 5##</td>
                        <td>##TourType 6##</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
    </div>
</body>

</html>
html css html-table overflow responsiveness
1个回答
0
投票

如果您决定遵循 David 的建议，我建议使用 CSS Grid 以获得更灵活和响应更快的布局。

下面是如何使用 CSS 实现网格布局的示例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

示例

演示（使用您的原始代码作为 CSS Grid）

 <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
  </div>

  .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 10px;
      max-width: 600px;
      margin: auto;
    }
    .grid-item {
      background: #333;
      color: white;
      padding: 10px;
      border-radius: 5px;
      text-align: center;
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.