По умолчанию таблицы в HTML выглядят достаточно убого, но с Bootstrap это очень хорошо решается. Давайте для начала посмтрим, что как выглядит таблица по умолчанию:
Да уж, сразу и не сообразишь, что это таблица, поэтому я стрелочкой указал, мало ли кто не понял. А теперь давай поработаем над дней. Добавим класс table
<table class="table"> ... </table>
Уже лучше. Но давайте уменьшим padding в таблице, чтобы она занимала меньше места.
<table class="table table-condensed"> ... </table>
А теперь добавим заливку строкам
<table class="table table-condensed table-striped"> ... </table>
И напоследок давайте сделаем нашу таблицу отзывчивой, т.к. по умолчанию она не является таковой. Для этого ее нужно обернуть в контейнер с классом table-responsive
<div class="table-responsive"> <table class="table table-condensed table-striped"> ... </table> </div>
А этот пример лучше посмотреть на демо (не отзывчивая таблица), а потом демо (отзывчивая таблица).
По идее вы должны заменить полосу прокрутки у нашей таблицы. Вот так вот она стала отзывчивой.
Это еще далеко не все возможности, которые мы можем применить к таблицам, более детально смотрим на getbootstrap.com