Question

我对此非常陌生，希望有人能告诉我如何让这张桌子反应灵敏。我使用的是Bootstrap 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>

Answer 1

在bootstrap中，您需要添加适当的元素和类..

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

并避免样式大小和内联

Answer 2

是的，使用boostrap作为scaisEdge说，如果你想要更多样式和自定义，你可以参考文档Boostrap tables祝你好运。

如何使表格响应

2 个答案: