使用引导程序创建网络表

问题描述：

我正在创建一个应能够在桌面，智能手机和平板电脑上运行的网络表。使用引导程序创建网络表

因此我使用HTML，CSS，PHP和Bootstrap-package。

除此之外，我使用800像素以下的表格更改为列的选项：http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table。

有2个问题，我不知道如何解决这些问题：

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

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

您有什么想法吗？

非常感谢！

此致敬礼。

康拉德

我没有看到任何附件？ :) –

我们可以看到你的html吗？这是td tags @ Bundesland＆Ort中的简单错字吗？ – mickmackusa

现在你可以看到附件了！ :) –

答

ÿ OU可能需要安装第三方库为您的要求

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

答

要在左侧和右侧的列使用类“行”去掉垫衬。因此，例如：

.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，你能不能显示一个截图？除此之外，您还可以添加定位到桌面上的填充的其他样式。 – Hewlett

这里无法添加屏幕截图。你有一个想法如何在“添加评论”字段中做到这一点？ –

答

现在，它的工作原理与

table {border-collapse: separate;}

我还使用了片断

<div class="row">

使用引导程序创建网络表

相关推荐