html - 如何使表格响应

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>

并避免样式大小和内联