css - 避免中间标记干扰显示 :table

标签 css

我有包含多种形式的类似表格的数据。由于有很多表格，我不能使用真实的表格。可以在 fiddle 中看到该表 here , 也在这条线之下。我的问题是标题:如您所见，标题不合适。我认为 <form>标签正在破坏显示。

有没有办法让<form>标记“无量纲”(不干扰“表”)？

PS:对本帖不重要，表是通过SQL查询生成的，JS采集数据后发给php在DB中更新。

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>

最佳答案

删除 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>

关于css - 避免中间标记干扰显示 :table，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52425791/

上一篇：html - 当我悬停时如何更改特定链接的文本或背景颜色？

下一篇：javascript - 基于双单选按钮选择显示/隐藏输入字段

相关文章：

css - 如何从公用文件夹中导入组件的样式表。组件文件在 src/components/files 然后我的 app.js 看起来像

html - Bootstrap 网格裁剪错误

php - 将属性添加到通过 wp_register_style 生成的链接标记？

javascript - 菜单在不应该的时候中断

php - 从每个字段的列中获取值，但它返回 NULL？

html - 可编辑文本区域特定宽度的背景颜色

javascript - 从表中选择一个单元格并为其指定唯一的类

javascript - 打印时将元素设置为内联显示，该元素设置为无

css - 滚动时更改 3D 透视 - 固定消失点

javascript - 动态添加的选择列表中的问题

©2024 IT工具网  联系我们