Question 43989 in Html Question posted in
Some basic documentation can be found here.

How to get overflow-x working on tables inside div – Html

Sorry but just can’t get this working, thankful for any advices,
in example below the browser either ignores the td-width or expands outside the container-div:

Example available at: 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>
Tags:

5

Answers


  1. 0

    Change:

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

    To :

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

    Error: you are using 2 styles in a single tag additionally use auto instead of scroll

    Login or Signup to reply.
  2. 0

    Please change your css. you can used two time style tag.
    style="width:50%;background-color:#ccc" style="overflow-x:scroll"
    to
    **style="width:50%;background-color:#ccc;overflow-x:auto" **

    <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>
    Login or Signup to reply.
  3. 0

    Use only one style property for a html tag ，too many styles will lose function beside the first one , but you can use more class for a tag

    
<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>
    Login or Signup to reply.
  4. 0

    I would do the following:

    • merge your style tags in your div and use overflow: auto
    • remove the display block from your table
    • remove the width 100% and add the fixed width as the sum of your column widths to the style tag of the table
    <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>
    Login or Signup to reply.
  5. 0

    If you want to apply the fixed width to the <td> then you must assign any width to the <table> tag width:100% ideally with table-layout: fixed and it is not the <table> tag which handles the overflow it is actually the parent <div> tag so you must set overflow-x: auto/scroll to the direct parent of your table.

    On the other hand you can also assign the fixed width to the <table> tag like 2000px without setting it’s table-layout to fixed, the <td> tags will get the equally divided width or if the content is small or will adjust the width automatically according the content available in <td> tags or you can still assign extra width to any specific <td> tag, i hope you get it.

    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search