如何使用 w3.css 制作全角和响应式 table

Question

在 w3.css w3 响应中使 table 在小屏幕上可滚动 但 table 不是 完整width 不再适用于中型或大型屏幕。我正在寻找一种解决方案，让 table 既能在小屏幕上响应又能在大屏幕上全宽显示。

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

注意： 全宽边框属于 table 而不是父元素。所以 table 是全宽但内容不是。

生成的图像 table:

table代码：

<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>

Answer 1

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

关于 w3 网格系统的更多信息：

https://www.w3schools.com/w3css/w3css_responsive.asp

Answer 2

我看到了 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>

Answer 3

我发现了我的错误。

我在 <table> 标签中直接使用了“w3-responsive”class。但我应该在父 <div> 中使用它作为 table.

的容器

如何使用 w3.css 制作全角和响应式 table

How to make full-width and Responsive table using w3.css

css

w3.css

full-width