Bàn trong một thiết kế Web Responsive

Question

Tôi đã đi theo cách thông thường là một hình thức đã được thiết lập trong một ứng dụng, mà là sử dụng một bảng trông như thế này:

<table> 
    <tbody> 
    <tr> 
     <td>Field</td> 
     <td>@Html.TextBox("Field")</td> 
    </tr> 
    <tr> 
     <td>Field 2</td> 
     <td>@Html.TextBox("Field2")</td> 
    </tr> 
    </tbody> 
</table> 

nào tạo ra một định dạng như:

Field <TextBox> 
Field <TextBox> 

Hầu hết các thiết kế điện thoại di động đẻ nó ra theo cách này:

Field 
<TextBox> 
Field 
<TextBox> 

đó là một cái gì đó tôi cần phải làm vì một số của tôi biểu mẫu quá dài để hiển thị trong trình duyệt trên thiết bị di động. Có cách nào dễ dàng để thiết lập điều này không? Có lẽ có một cách để làm cho mỗi tế bào render trên một dòng mới, mà sẽ làm việc cho tôi? Trình duyệt chéo nào đó được hỗ trợ?

Hoặc thiết kế lại có cần thiết không?

Cảm ơn.

Answer 1

Yea bạn có thể làm một cái gì đó giống như thả này màn hình hiển thị bảng cho khung nhìn nhỏ:

@media (max-width:40em) { 
    table, thead, tbody, tfoot, th, td, tr { display:block; } 
    tr + tr { margin-top:1em; } 
} 

Xem: css-tricks.com/responsive-data-tables/

Answer 2

Trong thiết bị di động - td {display: block}

Answer 3

nếu bạn muốn trang web thân thiện với thiết bị di động có một vài điều cần tránh. Bạn không thể sử dụng các bảng vì chúng được tạo với chiều rộng cố định nên nó sẽ không hiển thị đúng trong điện thoại di động nhỏ hơn. Cũng sử dụng vị trí tương đối trong css.Nếu bạn muốn bố trí khác nhau chúng sử dụng truy vấn @media. Hoặc sử dụng jquerymobile để thiết kế thiết kế tương tác.

Answer 4

Tôi thường làm đánh dấu biểu mẫu dưới dạng danh sách (loại nào phụ thuộc vào nhu cầu) hoặc một loạt các div. Về cơ bản, mọi trường đều có phần tử chứa. Đối với một ví dụ đơn giản, tôi sẽ sử dụng một div đây nhưng thats thường là yếu tố chứa cứu cánh cuối cùng cho tôi:

<div class="input-text form-field"> 
    <label for="the_element">Text Input</label> 
    <input id="the_element" type="text" /> 
</div> 

Đây thực sự là tốt nhất vì khi đánh dấu ít nhất một chút ngữ nghĩa hơn và nó mang lại cho chúng ta một tấn khả năng.

nhãn xếp chồng:

.form-field label { display: block; } 

Fixed nhãn width:

.form-field {overflow: hidden; width: 200px;} 
.form-field label {width: 40%; margin-left: 10%;} 
.form-field label, .form-field input, .form-field select, .form-field textarea {float: left; width: 50%;} 

dấu này lên cũng giúp bạn 2-up lĩnh vực khá dễ dàng

Markup:

<fieldset> 
    <legend>Name</legend> 
    <div class="input-text form-field"> 
     <label for="first_name">First Name</label> 
     <input id="first_name" type="text" /> 
    </div> 
    <div class="input-text form-field"> 
     <label for="last_name">Last Name</label> 
     <input id="last_name" type="text" /> 
    </div> 
</fieldset> 

CSS

fieldset {overflow: hidden;} 
.form-field {overflow: hidden; width: 200px; float:left; margin-left: 20px;} 
.form-field label { display: block; } 
.form-field input, .form-field select .form-field textarea {display: block; width: 100%;} 

Bạn có ý tưởng chung. Nếu bạn làm theo cách này và sử dụng độ rộng thực tế khi cần thiết, bạn có thể làm cho biểu mẫu hoàn toàn đáp ứng.

Answer 5

Tiếp tục sử dụng bảng. Đó là cách tiếp cận duy nhất cho phép bạn có biểu mẫu được hiển thị theo cách thích ứng để các nhãn chỉ lấy chiều rộng mà chiều dài yêu cầu dài nhất. Một bảng tự động được kết xuất hợp lý và bạn có thể dễ dàng tinh chỉnh nó.

Nó cũng hoạt động OK trên thiết bị di động, với điều kiện nhãn phải ngắn, như chúng phải có. Màn hình thiết bị di động không phải là mà thu hẹp mà chúng không thể chứa nhãn như hộp nhập "Thành phố" và 15 ký tự rộng.Khi các vấn đề nảy sinh trong một số trường hợp, người dùng có thể đối phó với họ, khi họ gặp phải các vấn đề tương tự xung quanh; họ có thể, ví dụ, biến thiết bị 90 độ.