Question

我有一个相当大的表（很多关于产品的数据），它比某些屏幕上的可用空间大，导致页面水平滚动。

我想在此表的右侧添加一些边距，以便它不会完全卡在窗口的右侧。（这是出于视觉和实际原因，因为在智能手机上，滚动条会出现在屏幕内容上，因此会导致可读性问题。）

但是margin-right属性似乎被忽略了，即使表包含在带有填充的div中。

有没有办法实现这个目标？

以下是问题的一个小例子：

＆＃13;

body {
  margin: 10px;
  padding: 10px;
  border: 5px solid #600;
  background: #eee;
}

.page {
  margin: 10px;
  padding: 10px;
  border: 5px solid #900;
  background: #ccc;
}

table {
  border: 5px solid #c00;
  background-color: #999;
  margin: 10px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Test overflowing content</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="main.css" />
</head>

<body>
  (body)

<div class="page">
  (.page)

  <table>
    <tbody>
      <tr>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
      </tr>
    </tbody>
  </table>

</div>
</body>
</html>

＆＃13;

Answer 1

您已将margin and margin-right指定给表格标记。 margin: 10px;覆盖margin-right。您可以使用margin: 10px 100px 10px 10px;。查看下面的更新代码段

body {
  margin: 10px;
  padding: 10px;
  border: 5px solid #600;
  background: #eee;
}

.page {
  margin: 10px;
  padding: 10px;
  border: 5px solid #900;
  background: #ccc;
}

table {
  border: 5px solid #c00;
  background-color: #999;
  /*margin-right: 100px;*/
  margin: 10px 100px 10px 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Test overflowing content</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="main.css" />
</head>

<body>
  (body)

<div class="page">
  (.page)

  <table>
    <tbody>
      <tr>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
      </tr>
    </tbody>
  </table>

</div>
</body>
</html>

Answer 2

试试这个，在css中添加td：

body {
   margin: 10px;
   padding: 10px;
   border: 5px solid #600;
   background: #eee;
}

.page {
   margin: 10px;
   padding: 10px;
   border: 5px solid #900;
   background: #ccc;
}

table {
   border: 5px solid #c00;
   background-color: #999;
   /* margin: 10px;  No need for margin */
}
td{
   padding: 5px;
   word-break: break-word;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>Test overflowing content</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" href="main.css" />
</head>

<body>
    (body)

    <div class="page">
      (.page)

      <table>
         <tbody>
            <tr>
                <td>_____________________________________</td>
                <td>Lorem ipsum dolor sit amet</td>
                <td>_____________________________________</td>
                <td>Lorem ipsum dolor sit amet</td>
                <td>_____________________________________</td>
            </tr>
         </tbody>
      </table>
   </div>
</body>
</html>

Answer 3

如果你在该表周围添加一个包装器，并且自动溢出它将解决问题。

＆＃13;

body {
  margin: 10px;
  padding: 10px;
  border: 5px solid #600;
  background: #eee;
}

.page {
  margin: 10px;
  padding: 10px;
  border: 5px solid #900;
  background: #ccc;
}

.page>div {
  overflow-x: auto;
}

table {
  border: 5px solid #c00;
  background-color: #999;
  margin: 10px;
}

＆＃13;

<div class="page">


  <div>
    <table>
      <tbody>
        <tr>
          <td>_____________________________________</td>
          <td>Lorem ipsum dolor sit amet</td>
          <td>_____________________________________</td>
          <td>Lorem ipsum dolor sit amet</td>
          <td>_____________________________________</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

＆＃13;

Answer 4

已修复

试试此代码

我也添加了媒体查询，为表格定义了固定的宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Test overflowing content</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="main.css" />
  <style type="text/css">

    body {
  margin: 10px;
  padding: 10px;
  border: 5px solid #600;
  background: #eee;

}

.page {
  margin: 10px;
  padding: 10px;
  border: 5px solid #900;
  background: #ccc;

}
.tableWrap{
    width: 100%;
  overflow: scroll;
}


table {
  border: 5px solid #c00;
  background-color: #999;
  margin-right: 100px;
  margin: 10px;

}
@media only screen and (max-width:960px){
    table{
        width: 800px;
    }
}

  </style>
</head>

<body>


<div class="page">

    <div class="tableWrap">
  <table width="100%" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
        <td>Lorem ipsum dolor sit amet</td>
        <td>_____________________________________</td>
      </tr>
    </tbody>
  </table>
  </div>

</div>
</body>
</html>

在非常大的表的右侧添加边距（溢出文档）

4 个答案: