在适合移动设备的网站上使用HTML表

时间：2018-11-26 16:49:49

标签： html css html-table

我有一个正在构建的网页，其中将包含教堂的员工信息。有12列数据。列包括：

位置
姓名，居住城市
编辑按钮
宗教兄弟复选框
宗教姐妹复选框
待命大臣复选框
进行VIRTUS培训的复选框
进行背景检查的复选框
收到的标准行为准则的复选框
接收到的技术/社交媒体政策的复选框
收到的《青少年行为守则》（如果未满18岁）复选框
删除员工的复选框

最初，我将网站开发为固定宽度的网站，并使用HTML表显示信息。当转到移动友好型时，我尝试使用DIV创建自己的表，但是无法获取每一行中的字段来保持相同的宽度和高度。

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

我希望表格在“编辑”按钮后的每一行中都包含单元格，以便在屏幕宽度变小时复选框会移至第二行。我想知道是否应该返回并尝试使用DIV重新创建表，或者是否有办法包装表。我无法掌握的是使所有DIV连续保持相同的高度和宽度，以及如何使一列中的所有DIV具有相同的宽度。也许我应该认真学习并尝试使用桌子。我可以在每行中嵌套两个表，以使该人的信息在一个表中，而复选框在另一个表中，并排2。这样，当屏幕的宽度不足以在一行中显示所有内容时，表格可以重新定位。没事没有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>

我很困惑。

2 个答案:

答案 0 :(得分：1)

您是否尝试过实施引导程序？您可以使用：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

以供参考：https://www.w3schools.com/bootstrap/bootstrap_tables.asp

答案 1 :(得分：0)

对于我来说，如果遇到这样的问题并且我的时间很短，我会创建 2 个表，一个针对大型设备，另一个针对小型设备，然后只需使用 @media 和 {{1} 在它们之间切换} 或 display: none。也许它不是最好的答案，而只是懒惰的我的解决方法，我可以在两个大和小设备中自定义我想要的任何东西，代码非常可见，超快而不会头疼。

相关问题
最新问题