Fatal编程技术网
  • html/
  • 在移动友好站点上使用HTML表

在移动友好站点上使用HTML表

html css

在移动友好站点上使用HTML表,html,css,html-table,Html,Css,Html Table,我有一个我正在建立的网页，里面有一个教堂的员工信息。共有12列数据。这些栏目包括： 位置 姓名、居住城市 编辑按钮 宗教兄弟复选框 宗教姐妹复选框 非专业部长复选框 Had VIRTUS培训复选框 用于Had背景检查的复选框 收到的标准行为准则复选框 收到的技术/社交媒体策略复选框 如果未满18岁，则选中已收到的青少年行为准则复选框 用于删除员工的复选框 我最初将该站点开发为一个固定宽度的站点，并使用HTML表来显示信息。在使用mobile friendly时，我尝试使用DIVs创建自己的表，但

我有一个我正在建立的网页，里面有一个教堂的员工信息。共有12列数据。这些栏目包括：

位置 姓名、居住城市 编辑按钮 宗教兄弟复选框 宗教姐妹复选框 非专业部长复选框 Had VIRTUS培训复选框 用于Had背景检查的复选框 收到的标准行为准则复选框 收到的技术/社交媒体策略复选框 如果未满18岁，则选中已收到的青少年行为准则复选框 用于删除员工的复选框

我最初将该站点开发为一个固定宽度的站点，并使用HTML表来显示信息。在使用mobile friendly时，我尝试使用DIVs创建自己的表，但无法使每行中的字段保持相同的宽度和高度

一些研究告诉我，可以说，不要试图重新制造轮子。如果表格是显示信息的最佳工具，请使用表格。我已经这样做了，但表格不会压缩到700px以下，移动设备（如手机）也会缩小以适应页面宽度

我希望表格在编辑按钮后将每行中的单元格包装起来，这样当屏幕宽度变小时，复选框就会移到第二行。我想知道是否应该返回并尝试使用DIVs重新创建表，或者是否有方法使表包装。我无法理解的是如何让一行中的所有div保持相同的高度和宽度，以及如何让一列中的所有div保持相同的宽度。也许我应该注意我自己的学习，试着用一张桌子。我可以在每一行中嵌套两个表，这样人员的信息在一个表中，复选框在另一个表中，两个复选框并排。这样，当屏幕不够宽，无法在一行中显示所有内容时，表可以重新定位。不。如果没有ID和CSS，就无法强制表间的高度和宽度。这也会变得一团糟

下面是我尝试过的代码的副本，它将行的后半部分包装在前半部分下，但看起来并不漂亮：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.arial10pt{
    font-family:arial;
    font-size:10pt; 
}
.col1 {
    width:5%; !important;
    height:55px !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
.col2 {
    width:15% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}

.col3 {
    width:15%!important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col4 {
    width:5%; !important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col5 {
    width:10% !important;
    height:55px !important;
    font-family:arial !important;
    font-size:10pt !important;  
    vertical-align:middle !important;   
}
.col6 {
    width:10% !important;
    vertical-align:middle;  
    font-family:arial !important;
    font-size:10pt !important;  
}
.col7 {
    width:10% !important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col8 {
    width:10% !important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col9 {
    width:10% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
.col9 {
    width:10% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
.col10 {
    width:10% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
</style>

</head>

<body>

 <div style="display:inline-table; width:39%; border:green 1px solid; padding:0; margin:0;" class="arial10pt">


        <table border="1" width="100%" cellspacing="0" cellpadding="0" class="arial10pt" >
        <tr>
        <td class="col1" style="padding:1px;"><strong>No Longer<br />with Parish</strong></td>
         <td class="col2" style="padding:1px;"><strong>Position</strong></td>
        <td class="col3" style="padding:1px;"><strong>Name, City</strong></td>
        <td class="col4" style="padding:1px;"></td>
        </tr>
        </table>
 </div>
  <div style="display:inline-table; width:59%; border:red 1px solid; padding:0; margin:0;" class="arial10pt">
        <table border="1" width="100%" cellspacing="0" cellpadding="0" class="arial10pt">
        <tr>
        <td class="col5" style="padding:1px;"><div style="text-align:center;" ><strong>Religious<br>Affiliation</strong></div></td>
        <td class="col5" style="padding:1px;"><div style="text-align:center;" ><strong>VIRTUS</strong></div></td>
        <td class="col6" style="padding:1px;"><div style="text-align:center; "><b>Background<br />Check</b></div></td>
        <td class="col7" style="padding:1px;" ><div style="text-align:center; "><strong>Standard Code <br />of Conduct</strong></div></td>
        <td class="col8" style="padding:1px;"><div style="text-align:center;"><strong>Technology / <br />Social Media</strong></div></td>
        <td class="col9" style="padding:1px;"><div style="text-align:center; "><b>Youth (under 18)<br />Code of Conduct</b></div></td>
        </tr>
        </table>
</div><br>
 <div style="display:inline-table; width:39%; border:green 1px solid; padding:0; margin:0;" class="arial10pt">



        <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
        <td class="col1" style="padding:1px;">
            <div style="text-align:center;">
            <form method="Post" action="NLWP.aspx">
            <input type="checkbox" onclick="del(this.form)"/>
            <input type="hidden" value="20401" name="ID">
            </form>
            </div>
         </td>
         <td class="col2" style="padding:1px;">
            <div style="text-align:left;">Associate Pastor - Parochial Vicar</div>
         </td>
         <td class="col3" style="padding:1px;">
            Fr. John Jacob<br />Sometown
         </td> 
         <td class="col4" style="padding:1px;">
            <div style="text-align:center;">
            <form action="#popup1" method="post" data-toggle="modal">
            <input type="hidden" value="18294" name="people_ID"/>
            <input type="hidden" value="20401" name="parishPositions_ID"/>
            <input name="which" type="hidden" value="2" />
            <input type="submit" value="Edit"/>
            </form>
            </div>
        </td>
        </tr>
        </table>






</div>
 <div style="display:inline-table; width:59%; border:red 1px solid;  padding:0; margin:0;" class="arial10pt">
        <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
        <td class="col5" style="padding:1px;">
            <div style="text-align:center;">
            Religious Brother
            </div>
        </td>
        <td class="col6" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />
            </div>
        </td>
        <td class="col7" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />
            </div>
        </td>
        <td class="col8" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
        </td>    
        <td class="col9" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
        </td>
        <td class="col10" style="padding:1px;">
            <div style="text-align:center; word-wrap: break-word;"> 
            <input type="checkbox"  disabled="disabled"/> 
            </div>
        </td>  
        </tr>
        </table>
</div><br>
 <div style="display:inline-table; width:39%; border:green 1px solid; padding:0; margin:0;" class="arial10pt">
        <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
        <td class="col1" style="padding:1px;">
            <div style="text-align:center;">
            <form method="Post" action="NLWP.aspx">
            <input type="checkbox" onclick="del(this.form)"/>
            <input type="hidden" value="21874" name="ID">
            </form>
            </div>
        </td>
        <td class="col2" style="padding:1px;">
            <div style="text-align:left;">Deacon</div>
        </td>
        <td class="col3" style="padding:1px;">
            <div style="text-align:left;"> Deacon&nbsp;Tim Smith<br />Some City&nbsp;</div>
        </td> 
        <td class="col4" style="padding:1px;">
            <div style="text-align:center;">
            <form action="#popup1" method="post" data-toggle="modal">
            <input type="hidden" value="15778" name="people_ID"/>
            <input type="hidden" value="21874" name="parishPositions_ID"/>
            <input name="which" type="hidden" value="2" />
            <input type="submit" value="Edit"/>
            </form>
            </div>
         </td>
         </tr>
         </table>
</div>
 <div style="display:inline-table; width:59%; border:red 1px solid;  padding:0; margin:0;" class="arial10pt">
         <table border="1" width="100%" cellspacing="0" cellpadding="0">
         <tr>
         <td class="col5" style="padding:1px;">
            <div style="text-align:center;">
            Religious Brother
            </div>
        </td>
         <td class="col6" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />
            </div>
         </td>
         <td class="col7" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />4/8/2016
            </div>
         </td>
         <td class="col8" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
         </td>    
         <td class="col9" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
         </td>
         <td class="col10" style="padding:1px;">
            <div style="text-align:center;"> 
            <input type="checkbox"  disabled="disabled"/> 
            </div>
         </td>  
         </tr>
         </table>
</div>  
</body>
</html>
我被难住了。

您尝试过实现引导吗？你可以用这个：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
仅供参考：

请发布您尝试过的代码。我尚未保存代码。我已经用所有不同的尝试覆盖了它。一个坏了，我就把它扔进垃圾桶，重新开始。大多数情况下，我是在找概念图，div还是table？我正在做一张可能有用的桌子。当我完成这个版本的时候，我会发布它。我已经编辑了原始的帖子，包含了一个给我带来问题的代码示例。我使用了表和div来尝试获得我想要的响应，但是仍然没有显示出想要的效果。然后，我决定尝试媒体查询，并随着视口宽度的缩小而减小字体大小。这使得桌子比700px缩小了很多，我设法做到了，看起来一切正常。老兄，这种移动响应的东西很复杂。