1

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

I have raised a related question already. since i did not get any answer for that question. I am again raising it here. Hope some one can help me solve this.

I have seen lot of questions regarding the size of Horizontal property given in pixels but could not see anything on %. Any help is greatly appreciated.

I want to create something like that is shown in the picture. enter image description here I have used Pixels to create it. But i need to give in %.

Previous Question Pasted by me: link: Html table - td width in percentage with overflow not working

Html:

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

        td {
            border: 1px solid black;
        }
<table>
    <tr>
        <td style="width: 25%">Column 1</td>
        <td style="width: 25%">Column 2</td>
        <td style="width: 25%">Column 3</td>
        <td style="width: 25%">Column 4</td>
        <td style="width: 25%">Column 5</td>
    </tr>
</table>

I have used Pixels to create it. But i need to give in %. HTML Table Pixels and %: 

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

        td {
            border: 1px solid black;
        }
 <div class="tableDiv" style="width: 100%; overflow-x: auto; ">
        <table >
            <tr>
                <td style="min-width:250px;">Column 1</td>
                <td style="min-width:250px;">Column 2</td>
                <td style="min-width:250px;">Column 3</td>
                <td style="min-width:250px;">Column 4</td>
                <td style="min-width:250px;">Column 5</td>
            </tr>
        </table>
    </div>
 <br/>
    <div style="width: 100%; overflow-x: auto;">
        <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>
    </div>
MahalingaM SubramaniyaM
  • 101
  • 10
  • What exactly are you asking for? There's no need to scroll horizontally, because your content fits into the container without any overflow... Are you looking to set a minimum width for each cell so that column 5 isn't 'compacted'? Also, note that percentages are relative to the immediate parent. Not only do you need a fixed unit of measurement at some point, but each of the ancestors will need a percentage `width` in order for the descendant(s) to inherit it as well. – Obsidian Age Jul 30 '18 at 02:15
  • See: https://stackoverflow.com/a/51586448/3516008 – caiovisk Jul 30 '18 at 03:15

3 Answers3

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>
Community
  • 1
  • 1
caiovisk
  • 3,667
  • 1
  • 12
  • 18
  • Glad its works. Please, read [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers). – caiovisk Jul 30 '18 at 07:24
1

    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.

VSM
  • 1,765
  • 8
  • 18
0

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>
Alexio
  • 75
  • 1
  • 11