0

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

3 回答 3

0

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

更多关于 w3 网格系统：

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

于 2021-09-04T09:50:33.153 回答
0

我看到 image_of_a generated_table 因为而不是您的代码。这就是为什么我假设您使用的是“w3-container”。请删除“w3-container”并仅使用 w3-responsive。 w3-container 类为任何 HTML 元素添加 16px 的左右填充。

您的代码应如下所示：

<!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>
于 2021-09-04T09:53:51.503 回答
0

我发现了我的错误。

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

于 2021-09-04T10:29:13.843 回答