避免中间标签干扰显示：

时间：2018-09-20 13:01:56

标签： css

我有类似表格的数据，其中包含许多表格。由于存在多种形式，因此我无法使用真实表。可以在小提琴here中以及此行下方看到该表。我的问题是标题：如您所见，标题不正确。我认为<form>标签破坏了显示效果。

是否有一种方法可以使<form>标签“无维度”（不干扰“表格”）？

PS：这对本文无关紧要，但是该表是通过SQL查询生成的，而JS会收集数据并将其发送给php，以便在数据库中进行更新。

function SendFormData(id) {
	TheResult="";
	var TheFormElements=document.getElementById(id).elements;
	for (i=0; i<TheFormElements.length; i++){
  	TheResult+=TheFormElements[i].name+": "+TheFormElements[i].value;
    TheResult+="<br>";
	}
  document.getElementById("Results").innerHTML = TheResult;
}
.table {
  display:table;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;	
}
.thead {
  display:table-header-group;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: left;
  border: none;
  background-color: #468754;
  color: white;	
}
.tbody {
  display:table-row-group;
}
.tr {
  display:table-row;
}
.td {
  display:table-cell;
  padding:5px;
}

.FormInputClass {
  padding: 6px 10px;
  margin: 8px 0;
  background-color:rgba(255, 255, 255, 0.4);
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;	
}
.FormInputClass:focus {
  border: 1px solid #bc6060;
	background-color:rgba(255, 255, 255, 0.7);
  transition: all 0.4s ease;		
}
.ButtonClass {
	margin-left: 10px;
  background-color: #1b8221;
  border: none;
  color: white;
  padding: 2px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
	border-radius: 3px;
	cursor: pointer;
  transition: all 0.5s ease;	
}
.ButtonClass:hover {
  background-color: #22c92b;
}
<div class="table"> 
    <div class="thead"> 
        <div class="tr"> 
            <div class="td">Date</div> 
            <div class="td">Main Group</div> 
            <div class="td">People</div> 
            <div class="td">Activity</div> 
            <div class="td"></div> 
        </div> 
    </div> 
    <div class="tbody"> 		
        <form id="One"> 
            <div class="tr" style="background-color:#e4f4d2"> 
                 <div class="td"><input type="date" class="FormInputClass" name="Date" value="2018-10-10"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Main" value="MainXX"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="In_charge" value="Peter"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Activity" value="Drawing"></div> 
                 <div class="td"><input type="button" value="Send data" class="ButtonClass" onclick="SendFormData('One');"></div> 
            </div> 
            <div class="tr" style="background-color:#e4f4d2"> 
                 <div class="td"></div> 
                 <div class="td"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_1" value="John"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_1_Acty" value="Lines"></div> 
                 <div class="td">&nbsp;</div> 
            </div> 
            <div class="tr" style="background-color:#e4f4d2"> 
                 <div class="td"></div> 
                 <div class="td"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_2" value="Mary"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_2_Acty" value="Lines"></div> 
                 <div class="td"></div> 
            </div>                      					
        </form>
        <form id="Two"> 
            <div class="tr" style="background-color:#f9f3d9"> 
                 <div class="td"><input type="date" class="FormInputClass" name="Date" value="2018-11-22"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Main" value="MainYY"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="In_charge" value="Stephen"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Activity" value="Controlling"></div> 
                 <div class="td"><input type="button" value="Send data" class="ButtonClass" onclick="SendFormData('Two');"></div> 
            </div> 
            <div class="tr" style="background-color:#f9f3d9"> 
                 <div class="td"></div> 
                 <div class="td"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_1" value="Dedalus"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_1_Acty" value="writing"></div> 
                 <div class="td"></div> 
            </div> 
            <div class="tr" style="background-color:#f9f3d9"> 
                 <div class="td"></div> 
                 <div class="td"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_2" value="James"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_2_Acty" value="images"></div> 
                 <div class="td"></div> 
            </div>   
            <div class="tr" style="background-color:#f9f3d9"> 
                 <div class="td"></div> 
                 <div class="td"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_3" value="Joyce"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_3_Acty" value="Words"></div> 
                 <div class="td"></div> 
            </div>                                         					
        </form>              
    </div>
</div>

<div id="Results">
</div>

1 个答案:

答案 0 :(得分：1)

删除tbody包装器div，并将tbody类添加到表中的每个表单中。除此之外，我将使用html表格标签代替样式为表格的div。

function SendFormData(id) {
	TheResult="";
	var TheFormElements=document.getElementById(id).elements;
	for (i=0; i<TheFormElements.length; i++){
  	TheResult+=TheFormElements[i].name+": "+TheFormElements[i].value;;
    TheResult+="<br>";
	}
  document.getElementById("Results").innerHTML = TheResult;
}
.table {
  display:table;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;	
}
.thead {
  display:table-header-group;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: left;
  border: none;
  background-color: #468754;
  color: white;	
}
.tbody {
  display:table-row-group;
}

.thead .td{
  padding: 10px;
}

.tr {
  display:table-row;
}
.td {
  display:table-cell;
  padding:5px;
}

.FormInputClass {
  padding: 6px 10px;
  margin: 8px 0;
  background-color:rgba(255, 255, 255, 0.4);
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;	
}
.FormInputClass:focus {
  border: 1px solid #bc6060;
	background-color:rgba(255, 255, 255, 0.7);
  transition: all 0.4s ease;		
}
.ButtonClass {
	margin-left: 10px;
  background-color: #1b8221;
  border: none;
  color: white;
  padding: 2px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
	border-radius: 3px;
	cursor: pointer;
  transition: all 0.5s ease;	
}
.ButtonClass:hover {
  background-color: #22c92b;
}
<div class="table"> 
    <div class="thead"> 
        <div class="tr"> 
            <div class="td">Date</div> 
            <div class="td">Main Group</div> 
            <div class="td">People</div> 
            <div class="td">Activity</div> 
            <div class="td"></div> 
        </div> 
    </div> 	
        <form id="One" class="tbody"> 
            <div class="tr" style="background-color:#e4f4d2"> 
                 <div class="td"><input type="date" class="FormInputClass" name="Date" value="2018-10-10"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Main" value="MainXX"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="In_charge" value="Peter"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Activity" value="Drawing"></div> 
                 <div class="td"><input type="button" value="Send data" class="ButtonClass" onclick="SendFormData('One');"></div> 
            </div> 
            <div class="tr" style="background-color:#e4f4d2"> 
                 <div class="td"></div> 
                 <div class="td"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_1" value="John"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_1_Acty" value="Lines"></div> 
                 <div class="td">&nbsp;</div> 
            </div> 
            <div class="tr" style="background-color:#e4f4d2"> 
                 <div class="td"></div> 
                 <div class="td"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_2" value="Mary"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_2_Acty" value="Lines"></div> 
                 <div class="td"></div> 
            </div>                      					
        </form>
        <form id="Two" class="tbody"> 
            <div class="tr" style="background-color:#f9f3d9"> 
                 <div class="td"><input type="date" class="FormInputClass" name="Date" value="2018-11-22"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Main" value="MainYY"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="In_charge" value="Stephen"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Activity" value="Controlling"></div> 
                 <div class="td"><input type="button" value="Send data" class="ButtonClass" onclick="SendFormData('Two');"></div> 
            </div> 
            <div class="tr" style="background-color:#f9f3d9"> 
                 <div class="td"></div> 
                 <div class="td"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_1" value="Dedalus"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_1_Acty" value="writing"></div> 
                 <div class="td"></div> 
            </div> 
            <div class="tr" style="background-color:#f9f3d9"> 
                 <div class="td"></div> 
                 <div class="td"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_2" value="James"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_2_Acty" value="images"></div> 
                 <div class="td"></div> 
            </div>   
            <div class="tr" style="background-color:#f9f3d9"> 
                 <div class="td"></div> 
                 <div class="td"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_3" value="Joyce"></div> 
                 <div class="td"><input type="text" class="FormInputClass" name="Helper_3_Acty" value="Words"></div> 
                 <div class="td"></div> 
            </div>                                         					
        </form>              
</div>

<div id="Results">
</div>

相关问题
最新问题