2014-03-07 53 views
1

如何獲取這些表格樣式在引導程序3中對移動設備的響應? Cananyone幫助我解決這個問題。我喜歡在iPhone/windows Phone/android上將這些表格樣式放在一行中。引導中的表格樣式3

<P align=left>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </P> 
<P> 

<TABLE border=0 cellSpacing=5 cellPadding=0> 

<TBODY> 

<TR> 

<TD bgColor=#ffffff vAlign=top align=left> 

<TABLE style="WIDTH: 292px; HEIGHT: 116px" border=0 cellSpacing=1 cellPadding=2> 

<TBODY> 
<TR> 
<TD bgColor=#ffffff vAlign=top align=left> 
<H1 style="MARGIN: 0cm 0cm 0pt" class=MsoNormal> 

<H1 style="MARGIN: 0cm 0cm 0pt" class=MsoNormal>Jouw loopbaan in beweging&nbsp;</H1></H1> 
<P><STRONG><FONT size=1></FONT></STRONG></P> 
<P><STRONG><FONT size=1></FONT></STRONG></P><FONT size=1> 
<P><FONT color=#000000><FONT size=1><FONT size=2></FONT></FONT></FONT></P> 
<P><FONT color=#000000><FONT size=1><FONT size=2><BR><IMG style="WIDTH: 100px; HEIGHT: 150px" border=0 hspace=0 alt="" align=left width=100 height=150 src="loader.aspx?mediaitemid=55910674-c85b-479e-9a00-1ba59bb838f3">Een Leven Lang Leren, Education Permanente termen die we allemaal weleens gehoord hebben. Meestal en wellicht ook snel weer achter ons gelaten. Want waarom? Je hebt immers toch goed, leuk en uitdagend werk. Soms zijn er wat zorgen over het feit of wij onze doelgroep wel behouden, de zoveelste stelselwijziging, maar we hebben het in het verleden allemaal overleefd. Financieel tekort? En dan was er opeens toch weer een meevaller en het tekort verdween als sneeuw voor de zon. Maar nu anno 2014 leven we in een andere werkelijkheid, de nieuwe Wet Jeugdzorg is een voldongen feit. <A href="loader.aspx?HYPERLINKID=736a03ac-77b6-41ad-9acb-3db71a98a973"><STRONG>Lees verder</STRONG></A></FONT></FONT></FONT></FONT></P></TD></TR></TBODY></TABLE></TD> 
<TD bgColor=#ffffff vAlign=top align=left> 
<P> 
<TABLE style="WIDTH: 292px; HEIGHT: 166px" border=0 cellSpacing=1 cellPadding=2> 
<TBODY> 
<TR> 
<TD bgColor=#ffffff vAlign=top align=left> 
<H1 style="MARGIN: 0cm 0cm 0pt" class=MsoNormal>Actueel:</H1> 
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal>&nbsp;&nbsp;</P> 
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><STRONG>Actueel nieuws</STRONG></P> 
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal>&nbsp;</P> 
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal>Aan het Social Plan wordt de laatste hand gelegd. Dit plan zal eind maart op deze pagina worden gepubliceerd.</P> 
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal>&nbsp;</P> 
<H1 style="MARGIN: 0cm 0cm 0pt" class=MsoNormal>Vacatures</H1> 
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><STRONG><A href="loader.aspx?HYPERLINKID=a8555a6c-e5d7-444f-92ba-c997d01bb0cb">Interne vacatures</A></STRONG></P></TD></TR></TBODY></TABLE></P></TD> 
<TD bgColor=#ffffff vAlign=top align=left> 
<TABLE style="WIDTH: 292px; HEIGHT: 305px" border=0 cellSpacing=1 cellPadding=2> 
<TBODY> 
<TR> 
<TD bgColor=#ffffff vAlign=top align=left> 
<H1 style="MARGIN: 0cm 0cm 0pt" class=MsoNormal> 
<H1 style="MARGIN: 0cm 0cm 0pt" class=MsoNormal>Loopbaanoriëntatie</H1></H1> 
<P><STRONG><FONT size=1></FONT></STRONG></P> 
<P><STRONG><FONT size=1></FONT></STRONG></P><FONT size=1> 
<P><FONT color=#000000><FONT size=1><FONT size=2></FONT></FONT></FONT></P> 
<UL> 
<LI><FONT color=#000000><FONT size=1><FONT size=2>Hoe arbeidsmarktfit ben jij?<A href="loader.aspx?HYPERLINKID=6d4680a9-01e2-4973-a7e1-7cf21cb39139" target=_blank> <STRONG>Doe de employabilityscan</STRONG><BR></A>Na het invullen ontvang je een uitgebreide rapportage met aandachtspunten. Bespreek met je leidinggevende op welke manier je deze kunt oppakken om te werken aan jouw arbeidsmarktfitheid.<BR></FONT></FONT></FONT></LI> 
<LI><FONT color=#000000><FONT size=1><FONT size=2>Wil je meer inzicht in je mogelijkheden? Wil je weten wat je capaciteiten en drijfveren zijn? Of wil je je CV updaten? <A href="loader.aspx?HYPERLINKID=41fd1b53-a942-4f09-8be2-fb7a18a1b608" target=_blank><STRONG>Klik hier</STRONG><BR></A></FONT></FONT></FONT></LI> 
<LI></FONT><FONT size=2>Stel je <STRONG>eigen E-portfolio</STRONG> samen en kijk op de vacaturebank welke vacatures matchen met jouw profiel.</FONT></LI></UL></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P> 
<P> 
<TABLE border=0 cellSpacing=5 cellPadding=0> 
<TBODY> 
<TR> 
<TD bgColor=#ffffff vAlign=top align=left> 
<P> 
<TABLE style="WIDTH: 292px; HEIGHT: 75px" border=0 cellSpacing=1 cellPadding=2> 
<TBODY> 
<TR> 
<TD bgColor=#ffffff vAlign=top align=left> 
<H1 style="MARGIN: 0cm 0cm 0pt" class=MsoNormal>KansenKrant</H1> 
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal>&nbsp;</P> 
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><IMG style="WIDTH: 150px; HEIGHT: 123px" border=0 align=left width=150 height=123 src="loader.aspx?mediaitemid=48054af6-cc2f-46f6-bf9e-74b18be1fda8">In de KansenKrant, die jaarlijks 4x verschijnt,&nbsp;lees je ervaringen van collega’s en ontdek je hoe jij je voorbereidt op de nieuwe jeugdzorg. Deze krant is een initiatief van <A href="loader.aspx?HYPERLINKID=08d40df9-6139-4c77-8d0a-594926c0fc6d" target=_blank><STRONG>'Doe mee in de nieuwe jeugdzorg'</STRONG></A>. Op&nbsp;haar website kun je aan de slag met verschillende tests en handige links. Doe ook mee!</P></TD></TR></TBODY></TABLE></P> 
<P>&nbsp;</P></TD> 
<TD bgColor=#ffffff vAlign=top align=left> 
<TABLE style="WIDTH: 292px; HEIGHT: 166px" border=0 cellSpacing=1 cellPadding=2> 
<TBODY> 
<TR> 
<TD bgColor=#ffffff vAlign=top align=left> 
<H1 style="MARGIN: 0cm 0cm 0pt" class=MsoNormal> 
<H1 style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><IMG style="WIDTH: 270px; HEIGHT: 281px" border=0 width=270 height=281 src="loader.aspx?mediaitemid=c4406deb-8cf4-4b6a-82d3-57e06a61fe62"></H1></H1></TD></TR></TBODY></TABLE></TD> 
<TD bgColor=#ffffff vAlign=top align=left> 
<TABLE style="WIDTH: 292px; HEIGHT: 94px" border=0 cellSpacing=1 cellPadding=2> 
<TBODY> 
<TR> 
<TD bgColor=#ffffff vAlign=top align=left> 
<H1 style="MARGIN: 0cm 0cm 0pt" class=MsoNormal> 
<H1 style="MARGIN: 0cm 0cm 0pt" class=MsoNormal>Contact<BR>&nbsp;</H1></H1> 
<P><STRONG><FONT size=1></FONT></STRONG></P> 
<P><STRONG><FONT size=1></FONT></STRONG></P><FONT size=1> 
<P><FONT color=#000000><FONT size=1><FONT size=2></FONT></FONT></FONT></P> 
<P><FONT color=#000000><FONT size=1><FONT size=2><IMG style="WIDTH: 90px; HEIGHT: 76px" border=0 align=left width=90 height=76 src="loader.aspx?mediaitemid=cd34365b-59ae-49c9-b03a-ae48efcc2e85">Heb je vragen? Neem dan contact op met loopbaanadviseur Det van Rooij via mail <A href="loader.aspx?HYPERLINKID=896eaf0d-95e9-449c-ab21-4f6a60aebb58"><STRONG>[email protected]</STRONG></A> of telefoonnummer 088-5261514.</FONT></FONT></FONT></FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P> 
<P>&nbsp;</P> 
<P>&nbsp;</P> 
<P>&nbsp;</P> 
    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="http://aagje.wsg.nu/Mobile/js/bootstrap.min.js"></script> 
</BODY></HTML> 

分享:http://jsfiddle.net/7g8nV/1/

回答

4

你也可以使用這樣的:

<table class="table table-responsive"> 
    <tr> 
     <td></td> 
    </tr> 
</table> 
0

從複製:Responsive table handling in Twitter Bootstrap

Bootstrap 3現在有響應表開箱。萬歲! :)

您可以點擊此處查看:http://getbootstrap.com/css/#tables-responsive

添加<div class="table-responsive">圍繞你的表,你應該是好去:

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

什麼我需要在CSS中添加,因爲它沒有工作。 –

+0

如果你有bootstrap.css和bootstrap-responsive.css,它應該可以工作。 –

+0

沒有它沒有工作:( –