问题
I am working on a web application, which is PC based, but support for tablets and smartphones is envisaged in the not so distant future. We are using Twitter Bootstrap (http://twitter.github.com/bootstrap/index.html) and JQuery as the CSS/Javascript core.
For most of previous development we have used tables to layout our forms as most of the applications were targeted to desktop usage, therefore using tables was just right in laying out the forms (most of them two column) to ensure alignment and so on.
However now that we are looking into adding mobile devices with limited screen real estate, and given the fact that not all the forms will be accessible in to the smart phones, I have started wondering whether we should keep the tables and create table-less forms for the mobile device. I am sure Twitter Bootstrap will provide us with the needed support for the table less forms, but I still wonder is it a major issue in 2012?
Being a new application we also have the choice of forcing the users to have the latest browser versions to access the application, but what does this say for mobile first design?
I know that this has been discussed over the years, but I am looking for a 2012 look at this question with the tools available.
回答1:
In my opinion Twitter Bootstrap is perfect for writing table-less forms. The code is a bit bloated for forms but it re-sizes really well on different screen resolutions.
回答2:
Use bootstrap!
It has responsive design, which means that is intended to work well in all kinds of screen sizes.
Here you got the official docs for forms.
You may try and look how it will be seen on a small screen device just resizing the screen width, making it narrower. You'll see all the components reaccomodating to the screen as you resize it.
回答3:
You can create your own custom framework (so to speak) which would be based on Responsive or fluid design. It would be div-based (or tableless) structure without any fixed px values. (i.e. all the padding/margin/fonts/widths,etc in em/%) The CSS would get slightly complex compared to the normal fixed px based CSS..
I had created a new page using the responsive design and it worked very well in all the modern desktop browsers as well as on mobile/tablets.
来源：https://stackoverflow.com/questions/10072991/responsive-html-page-design-pc-tablet-smartphone-with-table-or-table-less-fo