宽度为100％的子表扩展了父表 [英] Child table with 100% width extends parent

查看：67
本文介绍了宽度为100％的子表扩展了父表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

目前，我正在尝试创建一个子表，该子表的宽度可以超过父表的100％.因此，它们应该具有滚动条.但是，当我在下面的CSS中尝试该方法时，子级具有滚动条，并且由于某种原因扩展了父级容器的宽度.如果我使用500px之类的静态尺寸，效果很好，但是宽度为100％时会失败.

HTML

(简体)

<main class="main">
    <table>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </table>
</main>

CSS

(简体)

.main {
    margin: 0 10%;
    padding: 00;
    width: 80%;
    display: table;
}

table {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

摘要

静态宽度为500px的示例

 <!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      background-color: green;
    }
    
    .main {
      margin: 0 10%;
      padding: 00;
      width: 80%;
      display: table;
    }
    
    table {
      margin: 0;
      padding: 0;
      width: 500px;
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <main class="main">
    <table>
      <tr>
        <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </table>
  </main>
</body>

</html>

动态宽度为100％的示例

 <!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      background-color: green;
    }
    
    .main {
      margin: 0 10%;
      padding: 00;
      width: 80%;
      display: table;
    }
    
    table {
      margin: 0;
      padding: 0;
      width: 100%; /* PROBLEM */
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <main class="main">
    <table>
      <tr>
        <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </table>
  </main>
</body>

</html>

谢谢！

解决方案

您需要使用table-layout:fixed; 

 body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: green;
}

.main {
  margin: 0 10%;
  padding: 00;
  width: 80%;
  display: table;
}

table {
  margin: 0;
  padding: 0;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
} 

 <main class="main">
  <table>
    <tr>
      <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </table>
</main>
<main class="main" style="table-layout: fixed;">
  <table>
    <tr>
      <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </table>
</main>

at the moment I am trying to create a child table, that can have a width of more than 100% of the parent. Therefor they should have a scrollbar. But, when I try this with my following css the child has a scrollbar and for some reason extends the parent containers width. It works fine, if I use a static size like 500px, but it fails with a width of 100%.

HTML

(simplified)

<main class="main">
    <table>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </table>
</main>

CSS

(simplified)

.main {
    margin: 0 10%;
    padding: 00;
    width: 80%;
    display: table;
}

table {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

Snippets

Example with static width of 500px

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      background-color: green;
    }
    
    .main {
      margin: 0 10%;
      padding: 00;
      width: 80%;
      display: table;
    }
    
    table {
      margin: 0;
      padding: 0;
      width: 500px;
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <main class="main">
    <table>
      <tr>
        <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </table>
  </main>
</body>

</html>

example with dynamic width of 100%

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      background-color: green;
    }
    
    .main {
      margin: 0 10%;
      padding: 00;
      width: 80%;
      display: table;
    }
    
    table {
      margin: 0;
      padding: 0;
      width: 100%; /* PROBLEM */
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <main class="main">
    <table>
      <tr>
        <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </table>
  </main>
</body>

</html>

Thank you!

解决方案

You need to use table-layout:fixed; ref. the automatic layout may give unexpected result.

Fixed table layout

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

As a side note, the same issue happen with or without width:100%

body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: green;
}

.main {
  margin: 0 10%;
  padding: 00;
  width: 80%;
  display: table;
}

table {
  margin: 0;
  padding: 0;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

<main class="main">
  <table>
    <tr>
      <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </table>
</main>
<main class="main" style="table-layout: fixed;">
  <table>
    <tr>
      <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </table>
</main>

这篇关于宽度为100％的子表扩展了父表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆