HTML页面上的表比使用div的宽度要宽得多
问题描述 投票：-1回答：1
我正在创建一个包含文本和表格的简单HTML页面，我希望它能够响应。所以我使用了<viewport “width = device-width initial-scale = 1”>，但我的页面看起来像这样：
但我需要它看起来像这样：
我已经尝试从页面中删除表格，一切都很好看。但是桌子看起来不太合适。如何在没有BootStrap的情况下使其正常显示？
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<title>Name of title</title>
<style>
table { border: solid 1px; border-spacing: 0 }
td { border: solid 1px; padding: 0.5em }
</style>
</head>
<body>
<h1>Poker Tutorial</h1>
<div>
<p>No-Limit Texas Hold'em is often said to be a game that takes only a minute to learn, but a lifetime to master.</p>
<p>While the game can involve extremely complicated strategies - especially by the pros at the top level of the game, the fundamentals are fairly simple to learn. After watching this short video you should be able to take a seat at a play money table and know what your options are when it is your turn to act. </p>
</div>
<h2>Standard poker combinations</h2>
<table>
<tr><td>Combination</td><td>Example</td><td>Column3</td> <td>Column4</td><td>Column5</td></tr>
<tr><td>Royal Flush</td> <td>A♥K♥Q♥J♥10♥</td><td>42112</td><td>21123</td><td>123123123</td></tr>
<tr><td>Straight Flush</td><td>K♥Q♥J♥10♥9♥</td><td>3216</td><td>4234</td><td>123123123</td></tr>
<tr><td>Full House (3+2)</td><td>A♥A♠A♦8♥8♠</td><td>374214</td><td>23423423</td><td>123123123</td></tr>
<tr><td>Flush (one suit)</td><td>K♥Q♥J♥8♥7♥</td><td>512108</td><td>24234</td><td>123123123</td></tr>
<tr><td>Straight (row)</td><td>K♥Q♠J♦10♣9♥</td><td>1022100</td><td>24234234</td><td>123123123</td></tr>
<tr><td>Triple (3 of a kind)</td><td>A♥A♠A♦K♥2♣</td><td>5491221</td><td>423423</td><td>123123123</td></tr>
<tr><td>Two pairs</td><td>K♥K♠8♦8♥2♣</td><td>123552</td><td>42125</td><td>123123123</td></tr>
<tr><td>Pair</td><td>K♥K♠8♦3♥2♣</td><td>1098240</td><td>422133</td><td>123123123</td></tr>
</table>
</body>
</html>
1个回答
0
投票
投票
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<title>Name of title</title>
<style>
table { border: solid 1px; border-spacing: 0; width: 100%;}
td { border: solid 1px; padding: 0.5em }
#wrapper{ max-width: 100%;} //CHANGE THIS TO IF NEEDED.
</style>
</head>
<body>
<div id="wrapper"> // <-- ADD THIS WRAPPER TO INCLUDE ALL ITEMS
<h1>Poker Tutorial</h1>
<div>
<p>No-Limit Texas Hold'em is often said to be a game that takes only a minute to learn, but a lifetime to master.</p>
<p>While the game can involve extremely complicated strategies - especially by the pros at the top level of the game, the fundamentals are fairly simple to learn. After watching this short video you should be able to take a seat at a play money table and know what your options are when it is your turn to act. </p>
</div>
<h2>Standard poker combinations</h2>
<table>
<tr><td>Combination</td><td>Example</td><td>Column3</td> <td>Column4</td><td>Column5</td></tr>
<tr><td>Royal Flush</td> <td>A♥K♥Q♥J♥10♥</td><td>42112</td><td>21123</td><td>123123123</td></tr>
<tr><td>Straight Flush</td><td>K♥Q♥J♥10♥9♥</td><td>3216</td><td>4234</td><td>123123123</td></tr>
<tr><td>Full House (3+2)</td><td>A♥A♠A♦8♥8♠</td><td>374214</td><td>23423423</td><td>123123123</td></tr>
<tr><td>Flush (one suit)</td><td>K♥Q♥J♥8♥7♥</td><td>512108</td><td>24234</td><td>123123123</td></tr>
<tr><td>Straight (row)</td><td>K♥Q♠J♦10♣9♥</td><td>1022100</td><td>24234234</td><td>123123123</td></tr>
<tr><td>Triple (3 of a kind)</td><td>A♥A♠A♦K♥2♣</td><td>5491221</td><td>423423</td><td>123123123</td></tr>
<tr><td>Two pairs</td><td>K♥K♠8♦8♥2♣</td><td>123552</td><td>42125</td><td>123123123</td></tr>
<tr><td>Pair</td><td>K♥K♠8♦3♥2♣</td><td>1098240</td><td>422133</td><td>123123123</td></tr>
</table>
</div> //<-- CLOSE THE WRAPPER TAG BY DOING THIS
</body>
</html>
这是我编辑的代码版本。
1.) I added a div using the id wrapper, just above the first <h1>.
2.) Add the closing tag after the table.
3.) Set properties to the ID inside the <style> element. I added max-width: 100% because it will resize depending on the screen.
让我知道它是否像你要求的那样工作，否则我会尝试别的东西。 :)祝你好运伴侣。
最新问题
- cypress-如何使用“cy.contains”选择元素
- Flutter集成测试 -d web-server 指定自定义chrome路径进行测试
- 使用 Python 3.12 的 Windows 上的驱动程序返回 DependencyException：“未找到使用 libev 所需的 C 扩展”
- 如何在提交时正确验证 React 中的 JSON 表单
- 如何将物理 Android 设备添加到 idx.google.com / flutter 中的自定义设备列表
- 行高tinyMCE
- 从外部词汇富文本编辑器粘贴表格后没有获得新行
- 如何在chartjs中添加边框？
- Github 操作：在另一个 env 变量上使用 env 变量？
- 如何扩展 Express Request 接口以在 TypeScript 中包含 Mongoose Session？
- DataIku上的数据分析
- 使用Openpyxl，如何获取sheet._images无法获取的图像信息？
- pymongo 脚本中“$nin”的用法
- 在移动设备上的 iframe 中丢失 iOS 上的 localStorage 数据
- flutter 中的阿拉伯语离线语音识别？
- 拉取远程分支而不合并
- 如何防止react-json-schema-form中的字段逐行出现
- 聊天机器人将根据给定的信息/文档进行回答
- Azure AD 图形 API 根据 UserPrincipalName 和 Mail 搜索多个用户
- 从配置文件中读取参数和值
© www.soinside.com 2019 - 2024. All rights reserved.