Responsywność tabeli

Cześć, mam mały problem i nie mogę sobie z nim poradzić.
Zrobiłem responsywność strony z bootstrapa i wszystko działa po za jedną rzeczą, tabeli.
Mam tabelę w prostej postaci:

<table cellpadding="1" cellspacing="1" style="width:500px;">
<tbody>
	<tr>
		<td>
		<p style="text-align: center;">
		<img alt="tekst1"  height="200" src="/media/projektor1.png" style="" width="200" /></p>

		<p style="text-align: center;">Projektor krótkoogniskowy</p>
		</td>
		<td>
		<p style="text-align: center;">
		<img alt="projektor2"  height="200" src="/media/projektor2.png" style="" width="200" /></p> 
<p style="text-align: center;">Projektor dalekoogniskowy</p>
</td>
</tr>

(...)

</tbody>
</table>

I teraz rzecz polega na tym, że nie mogę za chiny jej ustawić do responsywności, miał ktoś kiedyś styczność z tabelą w RWD ?
Proszę o pomoc :).

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

Dzięki za szybką odpowiedź, no fakt można rzucić div'em, ale nadal nie wiem jak od strony CSS'a by to miało wyglądać dla tabeli?

Zacznij od usunięcia styli z HTMLa. To bardzo zły nawyk z wielu powodów:

• zmniejsza czytelność. Najczęściej HTML i tak jest nieźle rozrośnięty przez ilość tagów. Dodaj do tego łańcuszek nazw klas, dodatkowych atrybutów i robi się niewygodny potworek w czytaniu. Dorzucając deklarację styli będziesz miał totalnie nieczytelną sieczkę;
• drastycznie zmniejsza przenośność kodu i dokłada sporo pracy. Wiele styli jest powtarzanych (np. u Ciebie wymiary obrazków, centrowanie tekstu), pisanie tego jest czasochłonne, modyfikacja tym bardziej. Stylowanie w osobnym pliku CSS jest wygodniejsze, bo tworzysz klasę z określonymi stylami, przypisujesz ją do wybranych elementów i gotowe, możesz mieć wszystkie obrazki z ramką a dodatkowo w jakimś kontenerze zmienić jej promień i szerokość. Grafik wpadł na pomysł zwiększenia paddingów w określonych elementach? Robisz to dodając właściwość do odpowiedniej klasy i tyle. Mając np. 40 elementów ze stylem padding: 1rem; zmiana dla np. połowy na padding: 1.2rem; pochłonęła by sporo czasu, dużo więcej niż zmiana w pliku CSS;
• od styli liniowych "ważniejszy" jest już styl z !important, którego unikaj, bo zrobisz coś ciężkiego do modyfikacji. Pisząc oszczędne klasy w pliku CSS zawsze będziesz mógł stworzyć silniejszy selektor, który nadpisze daną właściwość. Specyfikacja opisuje to dokładniej. Warto poczytać bo nie ma tego dużo a ułatwia życie i zrozumienie niektórych rzeczy.

Style liniowe zostaw na dwie okazje:

• gdy trzeba będzie modyfikować element przy użyciu JS'a (czego staraj się unikać);
• gdy chcesz zaprezentować komuś (np. na forum) rozwiązanie.

Trochę wgryziesz się w temat to natkniesz się pewnie na obecnego króla front-endu - Reacta, który "nakłania" do pisania styli inline pod przykrywką "wszystko w jednym miejscu". To jedno z dziwactw front-endu, które jeszcze poznasz ;) Ale ćśśśś, bo nie można źle pisać o Facebooku ;)

Dzięki za radę, to w tej chwili mam tak:

<div class="tabelka-responsywna">
<table cellspacing="1">
<tbody>
	<tr>
		<td>
		<p>
		<img alt="projektor którtkoogniskowy" class="img-responsywne" src="/media/projektor1.png" /></p>

		<p>Projektor krótkoogniskowy</p>
		</td>
		<td>
		<p>
		<img alt="projektor dalekoogniskowy" class="img-responsywne" src="/media/projektor2.png" /></p>

		<p>Projektor dalekoogniskowy</p>
		</td>
	</tr>
</tbody>
</table>
</div>

a w CSS mam tak:

.tabelka-responsywna {
width: 500px;
text-align: center;
}
.img-responsywne {
	width: 200px;
	height: 200px;
}

Pewnie da się to jakoś ładniej ułożyć w jednym divie?

Czy ktoś jest w stanie mnie naprowadzić na zrobienie tej tabelki responsywnej ? :)

Jeżeli używasz Bootstrapa to czysteskarpety podesłał Ci template jak to ma wyglądać.

Więcej na ten temat masz tutaj na dole:
http://www.w3schools.com/bootstrap/bootstrap_tables.asp

Dodatkowo jak coś ma być responsywne to nie ustawiaj sztywnych wielkości jak te obrazki na 200px, tylko np

.img-responsywne {
    height: 100%;
    width: auto;
} 

Ja mam pytanie jeszcze z innej beczki ponieważ nie jestem może mistrzem HTMLa, ale dlaczego wkładasz obrazki w paragrafy?