2016-03-04 60 views
1

我对此很新,希望有人能告诉我如何使这个表响应。我使用的是引导v 3.3.4 HTML5和CSS3如何使表响应

一切是响应只是这个表不是

<style type="text/css"> 

.tg {border-collapse:collapse;border-spacing:0;border:none;} 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:1px 10px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;} 
.tg th{font-family:roboto, sans-serif;font-size:16px;font-weight:normal;padding:1px 10px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;} 
.tg .tg-yfiy{font-weight:bold;font-size:16px;vertical-align:bottom} 
.tg .tg-qv16{font-weight:bold;font-size:16px;text-align:center;vertical-align:top} 
.tg .tg-k010{font-weight:bold;font-size:16px;text-align:center;vertical-align:bottom} 
.tg .tg-yw4l{vertical-align:top} 
.tg .tg-qnmb{font-weight:bold;font-size:16px;text-align:center} 

</style> 

<table align="center" class="tg" style="undefined;table-layout: fixed; width: 563px"> 

<colgroup> 
<col style="width: 166px"> 
<col style="width: 81px"> 
<col style="width: 79px"> 
<col style="width: 86px"> 
<col style="width: 85px"> 
<col style="width: 66px"> 
</colgroup> 
<tr> 
<th class="tg-yfiy">test</th> 
<th class="tg-k010">one</th> 
<th class="tg-qv16">two</th> 
<th class="tg-qv16">three</th> 
<th class="tg-qv16">four</th> 
<th class="tg-qv16">five</th> 
</tr> 
<tr> 
<td class="tg-yw4l"></td> 
<td class="tg-qnmb">one</td> 
<td class="tg-qv16">two</td> 
<td class="tg-qv16">three</td> 
<td class="tg-qv16">four</td> 
<td class="tg-qv16">five</td> 
</tr> 
</table> 


</div> 
</div> 
</section> 
+1

SO不适合“请为我工作”。如果您需要关于如何正确提问的帮助,请查看[FAQ](http://stackoverflow.com/help/how-to-ask)。 – franklin

+0

您使用引导还是不使用? ... – scaisEdge

回答

1

在你需要添加适当的元素和类引导..

<div class="table-responsive"> 
    <table class="table"> 
     ... 
    </table> 
</div> 

并避免造型尺寸和内嵌

+0

感谢您的帮助。 :)欣赏它:) – Classics07

0

耶与助推器如说scaisEdge,如果你想更多的款式和定制你可以参考文档Boostrap tables祝你好运。

+0

谢谢,我是一个新手大声笑 – Classics07