如何使用 w3.css 制作全角和响应式表格答案

【问题标题】：How to make full-width and Responsive table using w3.css如何使用 w3.css 制作全角和响应式表格
【发布时间】：2026-01-25 22:35:01
【问题描述】：

在 w3.css 中，w3-responsive 使表格在小屏幕中可滚动，但表格在中或大屏幕中不再是全宽。我正在寻找一种解决方案，让表格既能在小屏幕上响应，又能在大屏幕上全宽。

下面的图片在中等屏幕中显示了我的表格。如您所见，它是右对齐的，大约三分之一的屏幕是空的。

注意：全宽边框属于表格而非父元素。所以表格是全宽的，但它的内容不是。

生成的表格图片：

表格代码：

<table id="result" class="w3-table-all w3-hoverable w3-centered w3-card w3-responsive">
<tr>
    <th>index</th>
    <th>date</th>
    <th>product</th>
    <th>variable</th>
    <th>status</th>
    <th>count</th>
    <th>stock</th>
    <th>user</th>
</tr>
<tr id="37172" class="table-data">
    <td>1</td>
    <td>2021/09/04</td>
    <td>something</td>
    <td>yellow</td>
    <td>In</td>
    <td>5</td>
    <td>0</td>
    <td>test</td>
</tr>

【问题讨论】：

标签： css w3.css full-width

【解决方案1】：

使用 w3 网格系统不会为您提供 100% 宽度的 div。您可以做的是在您的 div 样式或 css 中使用 width: 100% 并删除 padding 和 border

【讨论】：

【解决方案2】：

我发现了我的错误。

我直接在<table> 标签中使用了“w3-responsive”类。但我应该在父 <div> 中使用它作为表格的容器。

【讨论】：

【解决方案3】：

我看到 image_of_a generated_table 因为而不是您的代码。这就是为什么我假设您使用的是“w3-container”。请删除“w3-container”并仅使用 w3-responsive。 The w3-container class adds a 16px left and right padding to any HTML element.

您的代码应如下所示：

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="">

<h2>Responsive Table</h2>
<div class="w3-responsive">
<table class="w3-table-all">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
  <th>Points</th>
  <th>Points</th>
  <th>Points</th>
  <th>Points</th>
  <th>Points</th>
  <th>Points</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
  <td>50</td>
  <td>50</td>
  <td>50</td>
  <td>50</td>
  <td>50</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
  <td>94</td>
  <td>94</td>
  <td>94</td>
  <td>94</td>
  <td>94</td>
  <td>94</td>
</tr>
<tr>
  <td>Adam</td>
  <td>Johnson</td>
  <td>67</td>
  <td>67</td>
  <td>67</td>
  <td>67</td>
  <td>67</td>
  <td>67</td>
  <td>67</td>
</tr>
</table>
</div>

<div class="w3-panel w3-red">
  <p>A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.</p>
  <p>Resize the screen to see the effect.</p>
</div>

</div>

</body>
</html>

【讨论】：

感谢您的关注和帮助。在您的回答的帮助下，我发现了我的错误。我直接在“”标签中使用了“w3-responsive”类。但我应该在父“
”中使用它作为表格的容器。