html 表格右对齐在屏幕左侧有不可见的部分

Question

我有一个 html 表格。它右对齐。我里面有一个带有字段的表。但是，当我的 Chrome 浏览器显示表格时，表格的某些部分（最左边）会在左侧被裁剪，即最左边的内容位于屏幕之外。我的桌子的样子的图片在这里： https: //yadi.sk/i/rR6rm8nuZsfXlA

如何使右对齐表格从屏幕开头（左侧）开始以查看完整的表格内容？

我的代码是：

<table width=600 border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">

  <tr>

    <td>

      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">

        <tr>

          <td bgcolor="#F8F7F1"><strong>ID</strong></td>

          <td bgcolor="#F8F7F1">:</td>

          <td bgcolor="#F8F7F1">

            <?php echo $rows2['a_id']; ?>

          </td>

        </tr>

        <tr>

          <td width="18%" bgcolor="#F8F7F1"><strong>Name</strong></td>

          <td width="5%" bgcolor="#F8F7F1">:</td>

          <td width="77%" bgcolor="#F8F7F1">

            <?php echo $rows2['a_name']; ?>

          </td>

        </tr>

Answer 1

看起来您的外表的宽度 (600) 没有填满网页上的可用空间。如果您希望表格从屏幕开头开始，您可以尝试删除右对齐，如下所示：<table width=600 border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td bgcolor="#F8F7F1"><strong>ID</strong></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td bgcolor="#F8F7F1">:</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td bgcolor="#F8F7F1"><?php echo $rows2['a_id']; ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="18%" bgcolor="#F8F7F1"><strong>Name</strong></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="5%" bgcolor="#F8F7F1">:</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="77%" bgcolor="#F8F7F1"><?php echo $rows2['a_name']; ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr></table>

Answer 2

只需删除侧面的边距，您还可以使用百分比值在屏幕缩小时自动调整表格大小

Answer 3

如果表格宽度大于屏幕宽度，则右对齐表格没有任何意义。您可以尝试将其添加到<style>@media only screen and (min-width: 600px) {&nbsp; .mytable {&nbsp; &nbsp; margin-right: 0px;&nbsp; &nbsp; margin-left: auto&nbsp; }}</style>将 my table 类分配给要右对齐的表，并从 html 中删除align=right。