Html Table - How To Scroll Td Width When Table Width Is 100%?

I have create a table using with 5 columns. i have set table width as 100%. When i set the width of the table as 100% and above the horizontal scrollbar does

Solution 1:

Use the CSS Unit vw, see docs: https://www.w3schools.com/cssref/css_units.asp

vw = Relative to 1% of the width of the viewport^

^ Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

Then make your td as min-width 25vw

tabletd {
     min-width: 25vw;
     ...
 }

In order to have the horizontal scroll on the table only you can wrap it and then apply the overflow... Html:

<divclass="table-wrapper"><table>
  [...]
  </table></div>

The CSS:

.table-wrapper {
  overflow: auto;
}

.table-wrapper {
  overflow: auto;
}
table {
            border-collapse: collapse;
        }

tabletd {
            min-width: 25vw;
            border: 1px solid black;
        }

<divclass="table-wrapper"><table><tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr></table></div>

Solution 2:

table {
        width: 100%;
        border-collapse: collapse;
    }

    td {
        border: 1px solid black;
    }

<divstyle="width: 100vw; overflow:scroll;"><tablestyle="width: 130vw;"><tr><tdstyle="width: 50vw">50=50</td><tdstyle="width: 50vw">50 + 50 =100</td><tdstyle="width: 30vw">50 + 50 +30 =130(this td 30% need to horizontal scrollbar)</td></tr></table></div>

This answer for your previous question. try this.

Solution 3:

You should try instead to use min-width rather than width alone.

<table><tr><tdstyle="min-width: 25%">Column 1</td><tdstyle="min-width: 25%">Column 2</td><tdstyle="min-width: 25%">Column 3</td><tdstyle="min-width: 25%">Column 4</td><tdstyle="min-width: 25%">Column 5</td></tr></table>

Or if you were trying to get the scrollbar you could increase the table width

table {
        width: 125%;
        border-collapse: collapse;
    }

    td {
        border: 1px solid black;
    }

<table><tr><tdstyle="min-width: 25%">Column 1</td><tdstyle="min-width: 25%">Column 2</td><tdstyle="min-width: 25%">Column 3</td><tdstyle="min-width: 25%">Column 4</td><tdstyle="min-width: 25%">Column 5</td></tr></table>