2017-01-09 53 views
0

我有一個映射表和表格的問題。在我的表中,我有一些值,我想要重定向到一個頁面的形式的幫助。我讀過,我不能把表格放到表中,所以我試圖不。但是如果我讓表格外表php

<form> 
<table> 

結構,我的網頁上顯示的不是很好,我不與前端部分responsabile但無論如何,我想沒有問題吧。如果我讓表,沒有形式顯示是好的(如圖像)。左頁中的圖像和右部中的信息。在使用表格時,表格會下降,但效果不好。那麼該怎麼辦?我嘗試在這裏包含一張圖片,以查看我的頁面在沒有窗體的情況下的樣子,但我確實需要使用窗體。任何建議如何解決這個問題?我的意思是有可能像照片中的顯示,但加上使用一個窗體,而不是改變顯示? the image without including form tag

編輯:其中表顯示

/* ========================================================================== 
Tables 
========================================================================== */ 

    /* 
    * Remove most spacing between table cells. 
    */ 

table { 
border-collapse: collapse; 
border-spacing: 0; 
text-align: left; 
} 
table th { 
padding-right: 40px; 
} 

html {overflow-y: scroll; overflow-x: hidden;} 
body {font-family: 'Open Sans', sans-serif; background:#f0eeed; color: #676767;} 

.wrapper {width: 980px; margin: 0 auto;} 
#content {padding: 20px 0 80px;} 
.header:after {content:"";height:0;display:block;visibility:hidden;clear:both;} 
.header {background: #ef8887; border-bottom: 3px solid #db7a78;} 
.header .branding-title {float: left; margin: 0 0 0 5px; font: 0/0 serif; text-shadow: none; color: transparent; width:225px; height:125px;background:url(../img/branding-title.png) 0 6px no-repeat;padding: 6px 0;} 
.header .branding-title a {display: block; height: 125px; width: 225px;} 
.header .nav {float: right; top: 10; right: 0; margin: 0; position: relative; left: 15px; z-index: 99999999;} 
.header .nav li {display: inline-block; margin: 0; list-style: none;} 
.header .nav li a { 
    color: white; 
    text-decoration: none; 
    display: block; 
    line-height: 95px; 
    padding: 10px 0 0; 
    margin: 0 0 0 50px; 
    width: 100px; 
    text-align: left; 
    background: url('../img/nav-sprite.png') no-repeat 0px 105px; 
    white-space: nowrap; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    } 
    .header .nav li.on a {text-decoration:underline;} 
    .header .nav li a:hover, .header .nav li a:active {opacity: 0.7;} 
    .header .nav li.books a {background-position: 8px -5px;} 
    .header .nav li.movies a {background-position: 13px -105px;} 
    .header .nav li.music a {background-position: 15px -235px;} 
    .header .nav li.suggest a {background-position: 35px -340px;} 
    #content {min-height: 400px; background: white;} 
    .section.page:after {content:"";display:block;visibility:hidden;height:0;clear:both;} 
    .section.page {padding: 34px 0; background: white;} 
    .section.page h1 { 
    font-size: 24px; 
    text-align: center; 
    line-height: 1.6; 
    font-weight: normal; 
    } 
    .section.page .media-details h1 { 
    text-align: left; 
    } 
    .section.page p {width: 475px; margin-left: auto; margin-right: auto; } 
    .section.page .media-details h1 .price {color: #9d9f4e; padding-right: 10px; font-size: 34px;} 
    .section.catalog {padding-bottom: 42px;} 
    .section.catalog h2 { 
    font-size: 24px; 
    text-align: center; 
    line-height: 1.6; 
font-weight: normal; 
padding-top: 20px; 
} 
.section.catalog ul.items {margin: 0 0 -17px 0; padding: 0; width: 997px;} 
.section.catalog ul.items li { 
display: inline-block; 
list-style: none; 
width: 204px; 
text-align: center; 
padding: 14px; 
margin: 0 0 17px 17px; 
position: relative; 
left: -17px; 
} 
.section.catalog ul.items li a:hover:after { 
content: '+'; 
font-size: 50px; position: absolute; top:35px; right:30px; color: #3888c2; vertical-align: top; 
} 
.section.catalog ul.items li a { 
background: white; 
display: block; 
padding: 30px 0 10px; 
text-decoration: none; 
} 
.details-button { 
color: #888; 
} 
.section.catalog ul.items li a:hover { 
opacity: 1; 
color: #666; 
} 
.section.catalog ul.items li img { 
width: 190px; 
border: 6px solid #f0eeed; 
} 
.section.catalog ul.items li p { 
margin-left: 0; 
margin-right: 0; 
width: auto; 
} 

.media-picture { 
float: left; 
width: 400px; 
text-align: center; 
border: 1px solid #d9d9d9; 
padding: 14px; 
background: #f0eeed; 
} 
.media-picture span { 
background: white; 
display: block; 
width: 100%; 
padding: 36px 0 61px; 
} 
.media-picture img {width: 292px;} 
.media-details { 
width: 460px; 
float: right; 
} 
.media-details form { 
margin-left: 0; 
} 
td, th { 
padding: 5px 5px; 
} 
form {width: 475px; margin: 34px auto;} 
form tr, tr {text-align:left;vertical-align: top; padding:2px;} 
form table {width: 475px; margin-bottom: 16px;} 
form th { 
width: 150px; 
vertical-align: middle; 
padding: 8px; 
} 
form td { 
padding: 15px 15px; 
} 
form td select, 
form td input, 
form td textarea { 
width: 100%; 
border-radius: 4px; 
padding: 10px; 
border: 1px solid #a5a5a5; 
font-size: 14px; 
font-family: 'Open Sans', sans-serif; 
} 
form input[type="submit"] { 
width: 475px; 
text-align: center; 
border: 0; 
background: #3888c2; 
color: #FFF; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
font-size: 16px; 
padding: 14px 0 16px; 
font-family: 'Open Sans', sans-serif; 
} 
form input[type="submit"]:hover { 
background: #358dce; 
cursor: pointer; 
} 

.search { 
background: #f0eeed; 
border-bottom: 3px solid #dddddd; 
width:100%; 
text-align:right; 
} 
.search form { 
margin: 5px 5px 5px auto; 
} 
.search form input[type="submit"] { 
width: auto; 
text-align: center; 
border: 0; 
background: #3888c2; 
color: #FFF; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
font-size: 16px; 
padding: 6px; 
font-family: 'Open Sans', sans-serif; 
} 
.page p.message { 
background: #ffeca4; 
border: 1px solid #f16702; 
padding: 1em; 
width: 444px; 
} 
.breadcrumbs { 
font-size: 14px; 
font-weight: normal; 
padding: 14px 0 48px; 
} 
.breadcrumbs a { 
text-decoration: none; 
color: #3888c2; 
} 
.note-designer { 
font-size: 14px; 
font-style: italic; 
font-weight: bold; 
} 

.footer { 
background: #f0eeed; 
border-top: 3px solid #dddddd; 
padding: 42px 0; 
font-size: 12px; 
color: #a5a5a5; 
} 
.footer ul {margin: 0; padding: 0; float: left;} 
.footer ul li { 
margin: 0; 
padding: 0; 
list-style: none; 
display: inline-block; 
} 
.footer ul li:after {content:" | "} 
.footer ul li:last-child:after {content:"";} 
.footer p {margin: 0; padding-right: 3px;} 
.footer a {text-decoration: none; color: #539def; margin: 0 10px;} 
.footer li:first-child a {margin-left: 4px;} 
.footer a:hover, .footer a:active {text-decoration: underline;} 

遺憾的長碼,但是這是我的風格CSS中發現的CSS

+1

表單不應該影響html結構。但是,您可以使用javascript來序列化數據並向服務器發送獲取/發佈請求 –

+0

@MarkoMackic實際上,'

'標記是一個塊級元素,它將顯示OP正在看到的行爲。 –

+3

至於OP,你可能只需要添加'form {display:inline}'到你的CSS,它應該有所幫助。或者,也許給表單一個ID和目標,特別是頁面上的其他表單不會炸燬。如果沒有html表格的結構,很難肯定地說。它也可以像在td內部添加''一樣簡單。實際上,你不應該使用表格來定位事物。這只是糟糕的設計。 –

回答

0

正如前面提到的,避免用表格來什麼,但實際表格數據。最好使用它來定位頁面上的元素是不可預測的。

你說你對前端沒有責任,但是你有權訪問HTML嗎?我相信我們中的很多人可以給你一些有用的建議,但我們需要超越屏幕截圖的參考點:)。

你可能想看看一些CSS框架如何處理這個,它可能會給你一些靈感(http://getbootstrap.com/css/#forms)。我不是一個大的Bootstrap傢伙,但是這裏有很多關於表格/表格格式的基本示例。

0

您應該能夠在表單標籤內放置任何內容,而不會影響頁面上的任何內容。假設你不能僅僅停止使用表格,你可能需要玩弄CSS來清理它。如果表單標籤影響嵌入其中的任何東西,那麼您可能會在CSS中爲表單元素設置一些東西。如果可能的話,我會消除這種風格,如果它存在。