css 如何让overflow-x在div中的表上工作

g0czyy6m 于 2023-03-20 发布在其他

关注(0)|答案(5)|浏览(185)

很抱歉，但只是不能得到这个工作，感谢任何建议，在下面的例子中，浏览器要么忽略td-width或扩展到容器-div之外：
示例可从以下网址获得：https://jsfiddle.net/tomjoad2000/1jn9b2f7/

<div>
  <div style="width:50%;background-color:#ccc" style="overflow-x:hidden">
    <h2>ignores td width:</h2>
    <table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
      <tr>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
      </tr>
    </table>
  </div>
  <div style="width:50%;background-color:#ccc" style="overflow-x:scroll">
    <h2>ignores overflow-x:</h2>
    <table border="1" width="2000px">
      <tr>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
      </tr>
    </table>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75743811/how-to-get-overflow-x-working-on-tables-inside-div

5条答案

按热度按时间

pbgvytdp1#

对一个html标签只使用一个样式属性，太多的样式会失去第一个样式的作用，但是你可以对一个标签使用更多的类

<html>

<head>
    <style>

    </style>
</head>

<body>
    <h1>How to get x-scroll working?</h1>
    <div>
        <div style="width:50%;background-color:#ccc;overflow-x:hidden">
            <h2>ignores td width:</h2>
            <table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
                <tr>
                    <td style="width:400px">asdf</td>
                    <td style="width:400px">asdf</td>
                    <td style="width:400px">asdf</td>
                    <td style="width:400px">asdf</td>
                    <td style="width:400px">asdf</td>
                    <td style="width:400px">asdf</td>
                </tr>
            </table>
        </div>
        <div style="width:50%;background-color:#ccc;overflow-x:scroll">
            <h2>ignores overflow-x:</h2>
            <table border="1" width="2000px">
                <tr>
                    <td style="width:400px">asdf</td>
                    <td style="width:400px">asdf</td>
                    <td style="width:400px">asdf</td>
                    <td style="width:400px">asdf</td>
                    <td style="width:400px">asdf</td>
                    <td style="width:400px">asdf</td>
                </tr>
            </table>
        </div>
    </div>
</body>

</html>

赞(0）回复(0）举报 2023-03-20

vwoqyblh2#

变更：

style="width:50%;background-color:#ccc" style="overflow-x:scroll"

收件人：

style="width:50%;background-color:#ccc; overflow-x:auto"

**错误：**您正在一个tag中使用2个样式另外使用auto而不是scroll

赞(0）回复(0）举报 2023-03-20

uajslkp63#

请更改您的css。您可以使用两个时间样式标签。style=“宽度：50%;背景颜色：#ccc”style=“溢出-x：滚动”到“宽度：50%;背景色：#ccc;溢出-x：自动”

<div>
  <div style="width:50%;background-color:#ccc" style="overflow-x:hidden">
    <h2>ignores td width:</h2>
    <table border="1" width="100%" style="display:block;table-layout:fixed;overflow-x:scroll">
      <tr>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
      </tr>
    </table>
  </div>
  <div style="width:50%;background-color:#ccc;overflow-x:auto;">
    <h2>ignores overflow-x:</h2>
    <table border="1" width="2000px">
      <tr>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
        <td style="width:400px">asdf</td>
      </tr>
    </table>
  </div>
</div>

赞(0）回复(0）举报 2023-03-20

bvn4nwqk4#

我将采取以下行动：

合并div中的样式标签并使用overflow: auto
从表中删除显示块
删除宽度100%，并将固定宽度作为列宽之和添加到表的style标记中

<div style="width:50%;background-color:#ccc;overflow-x:auto">
  <h2>doesn't ignore td width:</h2>
  <table border="1" style="table-layout:fixed; width:2400px">
    <tr>
      <td style="width:400px">asdf</td>
      <td style="width:400px">asdf</td>
      <td style="width:400px">asdf</td>
      <td style="width:400px">asdf</td>
      <td style="width:400px">asdf</td>
      <td style="width:400px">asdf</td>
    </tr>
  </table>
</div>

赞(0）回复(0）举报 2023-03-20

k4aesqcs5#

如果要将固定宽度应用于<td>，则必须为<table>标记指定任意宽度width：100%理想情况下使用table-layout：修复了，并且它不是处理溢出的<table>标记，它实际上是父<div>标记，因此您必须设置overflow-x：自动/滚动到表的直接父级。
另一方面，您也可以将固定宽度分配给<table>标签，如2000 px，而无需将其表格布局设置为固定，<td>标签将获得平均宽度，或者如果内容很小，将根据<td>标签中可用的内容自动调整宽度，或者您仍然可以将额外宽度分配给任何特定的<td>标签，我希望你得到它。

<div> 
  <div style="width:50%;background-color:#ccc; overflow-x:auto">
    <h2>ignores td width:</h2>
    <table border="1" style="table-layout:fixed; width: 100%">
      <tr>
        <td style="width:400px !important">asdf</td>
        <td style="width:400px !important">asdf</td>
        <td style="width:400px !important">asdf</td>
        <td style="width:400px !important">asdf</td>
        <td style="width:400px !important">asdf</td>
        <td style="width:400px !important">asdf</td>
      </tr>
    </table>
  </div>
  <div style="width:50%;background-color:#ccc; overflow-x:auto">
    <h2>ignores overflow-x:</h2>
    <table border="1" width="2000px">
      <tr>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
      </tr>
    </table>
  </div>
</div>

赞(0）回复(0）举报 2023-03-20

我来回答

css 如何让overflow-x在div中的表上工作

5条答案

相关问题

热门标签

最新问答