html - 在适合移动设备的网站上使用 HTML 表格
问题描述
我正在构建一个网页,其中将包含教堂的员工信息。有 12 列数据。这些列包括:
职位
名称,居住城市
编辑按钮
宗教兄弟
的复选框 宗教姐妹
的复选框 外行部长
的复选框 有 VIRTUS 培训
的复选框 有背景
的复选框 收到的标准行为准则的
复选框 收到的技术/社交媒体政策
的复选框 收到的青年代码的复选框行为(如果未满 18 岁)
复选框删除员工
我最初将该站点开发为一个固定宽度的站点,并使用一个 HTML 表格来显示信息。在移动友好时,我尝试使用 DIV 创建自己的表格,但无法让每行中的字段保持相同的宽度和高度。
一些研究告诉我不要尝试重新创建轮子。如果表格是显示信息的最佳工具,请使用表格。我已经这样做了,但是表格不会压缩到 700 像素以下,并且移动设备(例如手机)会缩小以适应页面的宽度。
我希望表格在编辑按钮之后将每行中的单元格包裹起来,以便当屏幕宽度变小时复选框移动到第二行。我想知道我是否应该返回并尝试使用 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 Tim Smith<br />Some City </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>
供参考:https ://www.w3schools.com/bootstrap/bootstrap_tables.asp
推荐阅读
- r - glm:你如何计算新数据的 logLik?
- php - PHP 中的 Spotify API 身份验证 - 重定向 URI 无效
- sql-server - 触发插入多条记录
- authentication - ASP Core 开始页面是登录,但不应该是
- jquery - File uploaded to SharePoint library using JQuery and SharePointPlus js lib only from second click
- javascript - Firestore 子集合删除文档中最旧的
- postgresql - 需要帮助在 ubuntu 18.04.3 上安装 postgresql
- excel - 在 vba 中定义动态范围
- excel - Excel中的索引匹配多个条件,查看部分匹配
- javascript - 如何在点击字符之前获取文本?