我是堆叠溢出的新手，我试图从其他人创建的现有桌面版网页制作移动网页。基本上，我必须为移动和桌面使用相同的网页。对于这个带表的特定页面，我正在尝试使用外部样式表更改移动表的模式。我已经使用此帖子附加了html骨架和css。最初，只有一行有两个s。我想带＃34; .td2＆＃34;到下一行新。我尝试了一个基本的表格，其中我能够将所有转换为tr工作但是在这种情况下，第二个包含表格让我变得困难。我尽力而为。如果有人帮助我，我会很有帮助。
tr{
display:table;
width:100%;
}
.lfttbl .td1, .td2{
display:table-row;
border-bottom: solid 1px #2b9ed5 !important;
}<table class="out">
<tr><td>
<table class="outtbl">
<tr>
<td>
<table class="lfttbl">
<tr>
<td class= td1>
<p> hihi hii
</td>
<td class= td2>
<table class = rttbl"">
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 0 :(得分：0)
您的代码中存在很多错误：
<p>没有关闭！继续你的布局，我能够进行这些修正，使其在CSS中运行。
tr{
display:table;
width:100%;
}
.lfttbl .td1, .td2{
display:table-row;
border-bottom: solid 1px #2b9ed5 !important;
}
.td1 {
display: block;
background: #f00;
}<table class="out">
<tr><td>
<table class="outtbl">
<tr>
<td>
<table class="lfttbl">
<tr>
<td class= td1>
<p> hihi hii</p>
</td>
<td class= td2>
<table class = rttbl"">
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 1 :(得分：0)
您必须关闭<p>hihi hi并在td上使用display: block;。
检查一下：
tr{
display:table;
width:100%;
}
.lfttbl .td1, .td2{
display:block;
border-bottom: solid 1px #2b9ed5 !important;
}<table class="out">
<tr><td>
<table class="outtbl">
<tr>
<td>
<table class="lfttbl">
<tr>
<td class= td1>
<p> hihi hii</p>
</td>
<td class= td2>
<table class = rttbl"">
<p>Lorem ipsum</p>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 2 :(得分：0)
所以，这就是我在努力的方向。经过多次试验和错误后，我发现它现在可以在桌面版中使用，但不能在移动设备中使用。我附上了我正在使用的代码和CSS（最初＆＃34;编辑＆＃34;＆＃34;删除＆＃34;在不同的td中）。现在我不知道它为什么不在主板设备上工作。我知道我不能在css中使用if else语句（无论是桌面还是移动）。
#shipIMtd, #shipIMrighttd1, #shipIMrighttd2{display:block;}<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;">
<link href="mno.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META Name="Robots" Content="noindex">
</head>
<table id="shipIMmaintbl" width="100%" cellpadding="0" cellspacing="0">
<tr><td align="center">
<table id= "shipIMsubtbl" border="0" width="940">
<tr>
<td valign="top" align="center" width="80%">
<div id="shipIMmidacdiv" class="account-mid"><br />
<table width="95%" border="0" cellspacing="0" cellpadding="0" id="table12">
<tr>
<td>
<table id="shipIMshipadtbl" width="735px" style="width:735px;border:solid 1px #D4D6D8;margin-bottom:15px;">
<tr>
<td id="shipIMsubtitle" valign="top" style="border-right: solid 1px #E7E4E4;padding:5px;"><span style="font:600 18px verdana;#2972B6"><strong> Addresses</strong></span></td>
<td height="35" align="left" bgcolor="#F6F4F4" class="padd-top-lt"> </td>
<div id="shipIMtitlediv" class="floatright newAddrBtn"><a href="uvx.asp"><input id="shipIMtitlebtn" type="button" value="+ Add"></a></div>
</div>
</tr>
<tr id="shipIMshipaddtr">
<td id="shipIMtd" valign="top" style="border-right: solid 1px #E7E4E4;width:200px;padding:15px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
</td>
<td id="shipIMrighttd1" align="left" class="padd-15 border-tbt1">
<table id="shipIMeditship" cellpadding=3 cellspacing=0 border=0 width=80><tr><td>
<form name="editship" action="abc.asp" method="post" />
<input type="hidden" name="shipID" value="shpid">
<input id="shipIMeditbtn" type="submit" value="Edit">
</form>
</td><td id="shipIMrighttd2">
<form name="deleteship" action="xyz.asp" method="post">
<input type="hidden" name="shipID" value="shpid" />
<input type="hidden" name="asktype" value="firstask">
<input id="shipIMdelbtn" type="submit" value="Delete">
</form>
</td></tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>