Question

如何在bootstrap 3 for mobile中获得这些表格样式？ Cananyone帮助我解决了这个问题。我喜欢在iPhone / windows Phone / android上将这些表格样式放在一行。

<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>dvrooij@wsg.nu</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/

Answer 1

你也可以使用它：

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

Answer 2

复制自：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>

Answer 3

查看是否有效，完整地说明了所有类型的Bootstrap表。 http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Tables.php

引导程序3中的表格样式

3 个答案: