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

 table td {
     min-width: 25vw;
     ...
 }

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

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

The CSS:

.table-wrapper {
  overflow: auto;
}

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

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

<div class="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;
    }

<div style="width: 100vw; overflow:scroll;">
   <table style="width: 130vw;">
      <tr>
          <td style="width: 50vw">50=50</td>
          <td style="width: 50vw">50 + 50 =100</td>
          <td style="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>
        <td style="min-width: 25%">Column 1</td>
        <td style="min-width: 25%">Column 2</td>
        <td style="min-width: 25%">Column 3</td>
        <td style="min-width: 25%">Column 4</td>
        <td style="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>
        <td style="min-width: 25%">Column 1</td>
        <td style="min-width: 25%">Column 2</td>
        <td style="min-width: 25%">Column 3</td>
        <td style="min-width: 25%">Column 4</td>
        <td style="min-width: 25%">Column 5</td>
    </tr>
</table>