表在引导程序中没有响应

I have code to generate a table:

我有生成表的代码:

<table class="table table-hover">
    <thead>
        <tr>
            <th class="col-xs-3">Friendly Name</th>
            <th class="col-xs-3">Unique Tracker URL</th>
            <th class="col-xs-3">URL Endpoint</th>
            <th class="col-xs-1">Bitly Link</th>
            <th class="col-xs-1">Info and Settings</th>
            <th class="col-xs-1">Danger Zone</th>
        </tr>
    </thead>
    <tbody id="linksBody">
        <tr id="links">
            <td>(<a onclick="edit(this)">Edit</a>) <?php echo $row['friendly']; ?></td>
            <td>(<a onclick="editEnd(this)">Customize</a>) <a href="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></a></td>
            <td><a href="<?php echo $row['endpoint']; ?>"><?php echo $row['endpoint']; ?></a></td>
            <td><a href="<?php echo $row['bitly']; ?>"><?php echo $row['bitly']; ?></a></td>
            <td><a onclick="showDetails(this);">Show</a>/<a onclick="settings(this);">Settings</a></td>
            <td><a onclick="del(this);">Delete</a>/<a onclick="reset(this);">Reset</a></td>
        </tr>
    </tbody>
</table>

It scales well until about 1275px wide, as seen below:

它可以很好地扩展到大约1275px宽,如下所示:

However, when the screen size goes below that, it starts breaking:

但是,当屏幕尺寸低于该尺寸时,它会开始破坏:

What can I do to make my table responsive?

我该怎么做才能使我的桌子响应?

1 个解决方案

#1

Bootstrap has a class for this: .table-responsive. You can read all about his here.

Bootstrap有一个类:.table-responsive。你可以在这里阅读他的所有信息。

Wrap your code in a div with this class. Example:

使用此类将代码包装在div中。例:

<div class="table-responsive">
    <table class="table table-hover">
        [...]
    </table>
</div>

I hope this will help you!

我希望这能帮到您!

#1