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

Posted 2023-03-06

【中文标题】html表格右对齐在屏幕左侧有不可见部分

【英文标题】：html table right aligned has invisible part on the left of screen

【发布时间】：2020-12-14 18:16:42

【问题描述】：

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

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

我的代码是：

<table width=600 border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
  <tr>
    <td>
      <table  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  bgcolor="#F8F7F1"><strong>Name</strong></td>
          <td  bgcolor="#F8F7F1">:</td>
          <td  bgcolor="#F8F7F1">
            <?php echo $rows2['a_name']; ?>
          </td>
        </tr>

【参考方案1】：

如果您的表格宽度大于屏幕宽度，则将表格向右对齐没有任何意义。您可以尝试将其添加到

<style>
@media only screen and (min-width: 600px) 
  .mytable 
    margin-right: 0px;
    margin-left: auto
  

</style>

将 my table 类分配给要右对齐的表，并从 html 中删除 align=right。

【参考方案2】：

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

【参考方案3】：

您的外部表格的宽度 (600) 似乎没有填满您网页上的可用空间。如果您希望表格从屏幕的开头开始，您可以尝试像这样删除右对齐：

<table width=600 border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
    <tr>
        <td>
            <table  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  bgcolor="#F8F7F1"><strong>Name</strong></td>
                    <td  bgcolor="#F8F7F1">:</td>
                    <td  bgcolor="#F8F7F1"><?php echo $rows2['a_name']; ?></td>
                </tr>
            </table>
        </td>
    </tr>
</table>