Question

我在将表和表单映射到一起时遇到问题。在我的表中，我有一些值，在我希望重定向到页面的表单的帮助下。我读过我不能将表单放入表中，所以我试着不这样做。但是，如果我让

<form>
<table>

结构，我在页面上的显示不是很好，我不负责前端部分，但无论如何我想不用它的问题。如果我让表，没有表格显示是好的（如图像）。左页面中的图像和右侧部分中包含信息的表格。使用表格时，表格会下降而且不好。那该怎么办？我尝试在这里包含一个图像，以查看我的页面在没有表单的情况下的样子，但我确实需要使用该表单。有任何建议如何解决这个问题？我的意思是可以像在照片中那样使用显示器而不是使用表格并且不更改显示器？

编辑：显示表格的css

  /*   ==========================================================================
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中找到的

Answer 1

如前所述，除了实际的表格数据外，避免使用表格。使用它来定位页面上的元素充其量是不可预测的。

您说您不对前端负责，但您是否可以访问HTML？我相信我们很多人都可以给你一些有用的建议，但我们需要一个超越截图的参考点:)。

你可能想看看一些CSS框架如何处理这个问题，它可能会给你一些灵感（http://getbootstrap.com/css/#forms）。我不是一个很大的Bootstrap人，但是在表单/表格格式上有很多基本的例子。

Answer 2

您应该能够在表单标记内放置任何内容，而不会影响页面上的任何内容。假设您不能尽快停止使用表格，您可能需要使用css来清理它。如果表单标记影响嵌入其中的任何内容的方式，那么您可能在CSS样式中使用表单元素。如果可能的话，如果存在，我会消除这种样式。

表外php表格

2 个答案: