Html table - td width in percentage with overflow not working

Asked Jul 27 '18 at 09:05

Active Jul 27 '18 at 09:11

Viewed 114 times

I am trying to create a table using . i have set table width as 100% .

when i set the width of the table as 100% and above the horizontal scrollbar doesnot work.. can some body help me to solve this. Help appreciated.

HTML:

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

        td {
            border: 1px solid black;
        }

<table style="width: 100%;">
    <tr>
        <td style="width: 50%">50=50</td>
        <td style="width: 50%">50 + 50 =100</td>
        <td style="width: 30%">50 + 50 +30 =130(this td 30% need to horizontal scrollbar)</td>
    </tr>
</table>

asked Jul 27 '18 at 09:05

MahalingaM SubramaniyaM

Not entirely sure what you want. But the total width of the table should be `100%`. But yours are `130%` – Joshua Jul 27 '18 at 09:09
if your using bootstrap use table-responsive class – Varsha Dhadge Jul 27 '18 at 09:11
This is not a duplicated question..Reopen this. – VSM Jul 28 '18 at 09:34
@konekoya I understand the total width of the table should be 100%. but here i have an requirement I need to create a table with the dynamic fields with dynamilcally set width and if the tables width goes beyond 100%. I need a horizontal scrollbar to appear. hope its clear now. – MahalingaM SubramaniyaM Jul 30 '18 at 02:17
@Varsha Dhadge I am not using bootstrap here.. I am using the HTML table with dynamically set width and height – MahalingaM SubramaniyaM Jul 30 '18 at 02:19
@MahalingaM SubramaniyaM Ask this question again. I have a answer, sometimes it may be worked for you. – VSM Jul 30 '18 at 04:03
@VSM thanks buddy. again i raised same question. https://stackoverflow.com/questions/51586173/html-tabletd-how-to-scroll-td-width-when-table-width-is-100?noredirect=1#comment90138352_51586173 Please give me a answer to this question. again thanks and advance. – MahalingaM SubramaniyaM Jul 30 '18 at 04:14
I posted there the answer for this question...Try it..Let me know if there any issues. – VSM Jul 30 '18 at 04:19
@VSM thanks buddy i saw your answer. your code working . but window totally scrolling. pls check : – MahalingaM SubramaniyaM Jul 30 '18 at 05:06
Apply that html code inside your div, then only that div is scrolling not the window – VSM Jul 30 '18 at 05:10
@VSM //Your code: table { width: 100%; border-collapse: collapse; overflow:scroll; } td { border: 1px solid black; } – MahalingaM SubramaniyaM Jul 30 '18 at 05:10
@VSM //Another Code

Column 1 Column 2 Column 3 Column 4 Column 5

– MahalingaM SubramaniyaM Jul 30 '18 at 05:12
what is this code about. I have already update previous code as it matches to your requirement. – VSM Jul 30 '18 at 05:31
@ MahalingaM SubramaniyaM I checked that code also..That code and mine are same regarding your two problems...Both works. cheers !!! – VSM Jul 30 '18 at 05:35
@VSM thank you so much.... – MahalingaM SubramaniyaM Jul 30 '18 at 06:14

Html table - td width in percentage with overflow not working

0 Answers0

Linked