我有一个非常简单的 html 表，其中只有一行，如下所示:
<div class="container">
<table style="width: 100%; " >
<tr style="vertical-align: top;">
<td width="55%" style="border: 1px solid #e0e0e0; "> CONTENT1 </td>
<td width="5%" > </td>
<td width="40%" > CONTENT 2 </td>
</tr>
</table>
<div>
在 chrome 浏览器上打开时显示效果很好。 但是，当我尝试在 IPAD 上打开时，最后一列的内容会变形并超出包含此表格的容器 div。如何解决这个问题？
最佳答案
我强烈建议您停止使用表格，并开始使用 <div>秒。
话虽这么说，您的表格加起来恰好是 100%，这意味着任何额外的边框都会将其宽度推到 100% 以上，从而将最后一个元素换行到下一行。试试这个:
<div class="container">
<table style="width: 100%; border: 0px;" >
<tr style="vertical-align: top; border: 0px;">
<td width="55%" style="border: 0px;"> CONTENT1 </td>
<td width="5%" style="border: 0px;"> </td>
<td width="40%" style="border: 0px;"> CONTENT 2 </td>
</tr>
</table>
<div>
更新:
这是一个使用 <div> 的版本s 和一点 CSS。我推荐这个版本，因为它更标准:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
body{margin: 0px;padding:0px;}
div{
display: inline-block;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div class="container" style="width: 100%">
<div style="width: 55%; background-color: #f90;">Content 1</div><!--
--><div style="width: 5%; background-color: #9f0;"> </div><!--
--><div style="width: 40%; background-color: #09f;">Content 2</div>
</div>
</body>
</html>
我添加了评论 <!-- -->在<div>之间s 因为否则你会在每个之间得到一个空白，这将占用页面宽度的 100% 以上。
关于javascript - 在 IPAD 上打开 html 时，HTML 表格不适合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24815407/