使用引导程序创建 web 表答案

【问题标题】：Creating a web-table with bootstrap使用引导程序创建 web 表
【发布时间】：2017-07-12 11:41:21
【问题描述】：

我正在创建一个可以在台式机、智能手机和平板电脑上运行的网络表格。

因此我使用 HTML、CSS、PHP 和 Bootstrap 包。

除了我使用小于 800 像素的选项，表格更改为一列：http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table。

有两个问题我不知道如何解决：

1：左栏（Bundesland）引起问题。请查看附件（图 1 和图 2）。第一个图像中的列是好的。在图 2 中，数据必须显示在每个框中。

我不知道如何调整框的大小，左右面板边框之间的间隙已关闭。

你有什么想法吗？

非常感谢！

最好的问候。

康拉德

【问题讨论】：

我没有看到任何附件？ :)
我们可以看看你的 html 吗？这是@ Bundesland & Ort 的 td 标签中的简单错字吗？
现在你可以看到附件了！ :)
这是图片 1 中“Bundesland”列的 PHP 片段： echo " ";if( $var_bl==false) echo $lrp[$key]['BL'].":";echo " ".$ lrp[$key]['Stadt']."";

标签： php html css twitter-bootstrap

【解决方案1】：

现在可以使用了

table {border-collapse: separate;}

我也用过sn-p

<div class="row">

【讨论】：

【解决方案2】：

要删除列左侧和右侧的填充，请使用“行”类。比如：

.foo,
.bar {
  background: #ccc;
  margin-bottom: 15px;
}

.foo .col-md-12,
.bar .col-md-12 {
  background: #ddd;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="foo">
  <div class="container-fluid">
    <div class="col-md-12">
      Without row
    </div>
  </div>
</div>

<div class="bar">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        With row
      </div>
    </div>
  </div>
</div>

欲了解更多信息：https://v4-alpha.getbootstrap.com/layout/grid/#nesting

【讨论】：

非常感谢@Hewlett，它适用于小于 800 像素的窗口。现在它不再适用于桌面窗口。正文元素比标题元素大。你有什么想法吗？
@UBA_KP，你能显示截图吗？除此之外，您还可以添加针对桌面上的填充的其他样式。
这里无法添加截图。您知道如何在“添加评论”字段中执行此操作吗？
您可以只更新您的帖子，也可以发布屏幕截图的链接。
将此添加到您的表格样式中：table-layout:fixed;

【解决方案3】：

您可能需要安装第 3 方库以满足您的要求

https://datatables.net/extensions/fixedheader/examples/integration/responsive-bootstrap.html

【讨论】：