How to give specific width to HTML table and columns

Question

I have created an HTML table with JSON data which I am dividing into four columns to show up on display Screen, and at one go showing 5 rows then after 5 seconds next five row, This how my table is working

Now I have to show that Table on a display screen which has a resolution of 1336*768 soi am trying to give the full with so that it fitted to screen without any scroll

Due to Some reasons I want to give width to my columns also but that too is not taking the width, I don't know what I am doing wrong It is coming

Code

 $(document).ready(function() { var tableValue = [{ "Item Name": "MANCHOW V SOUP", "SellingPrice": 100 }, { "Item Name": "MANCHOW NV SOUP ", "SellingPrice": 125 }, { "Item Name": "CEASER SALAD V", "SellingPrice": 175 }, { "Item Name": "CEASER SALAD NV", "SellingPrice": 230 }, { "Item Name": "GAMBUS REBOZADAS", "SellingPrice": 350 }, { "Item Name": "PANCO FISH FINGER", "SellingPrice": 270 }, { "Item Name": "MUSHROOM DUPLEX", "SellingPrice": 160 }, { "Item Name": "FRENCH FRIES", "SellingPrice": 99 }, { "Item Name": "HONEY GARLIC PRAWN", "SellingPrice": 350 }, { "Item Name": "CHICKEN MANCHURIAN", "SellingPrice": 180 }, { "Item Name": "MUSHROOM CHILLY", "SellingPrice": 120 }, { "Item Name": "SALT N PEPPER BABY CORN", "SellingPrice": 120 }, { "Item Name": "SOUTHERN STYLE CHICKEN", "SellingPrice": 210 }, { "Item Name": "PANEER NAGGETS", "SellingPrice": 210 }, { "Item Name": "HARA BHARA KEBAB", "SellingPrice": 160 }, { "Item Name": "CHICKEN TIKKA", "SellingPrice": 210 }, { "Item Name": "KALMI KEBAB", "SellingPrice": 250 }, { "Item Name": "PIZZA MARGARITTA", "SellingPrice": 200 }, { "Item Name": "PIZZA VEG FARMHOUSE", "SellingPrice": 200 }, { "Item Name": "BBQ CHICKEN PIZZA", "SellingPrice": 225 }, { "Item Name": "CHICKEN TIKKA PIZZA", "SellingPrice": 225 }, { "Item Name": "PESTO SAUCE", "SellingPrice": 175 }, { "Item Name": "ARABIATA", "SellingPrice": 160 }, { "Item Name": "PINK SAUCE", "SellingPrice": 160 }, { "Item Name": "GARBANZO BEAN SALAD", "SellingPrice": 90 }, { "Item Name": "MASALA PAPAD", "SellingPrice": 50 }, { "Item Name": "PEANUT MASALA", "SellingPrice": 60 }, { "Item Name": "GAJAR KA HALWA", "SellingPrice": 90 }, { "Item Name": "WATERMELON MARTINI", "SellingPrice": 281 }, { "Item Name": "Kiwi martini", "SellingPrice": 281 }, { "Item Name": " Apple gin", "SellingPrice": 225 }, { "Item Name": "Cucumber cooler ", "SellingPrice": 281 }, { "Item Name": "Martini", "SellingPrice": 225 }, { "Item Name": "Pink lady", "SellingPrice": 225 }, { "Item Name": " Bloody marry", "SellingPrice": 281 }, { "Item Name": "Cosmopolitan", "SellingPrice": 281 }, { "Item Name": "Sex on the beach", "SellingPrice": 281 }, { "Item Name": "Bull frog", "SellingPrice": 506 }, { "Item Name": "Long island iced tea ", "SellingPrice": 393 }, { "Item Name": "Pinacolada", "SellingPrice": 225 }, { "Item Name": "Daiquiri", "SellingPrice": 225 }, { "Item Name": "Mojito ", "SellingPrice": 281 }, { "Item Name": "Whisky sour", "SellingPrice": 281 }, { "Item Name": "Hot toddy", "SellingPrice": 225 }, { "Item Name": "Margarita", "SellingPrice": 337 }, { "Item Name": "Tequila sunrise", "SellingPrice": 337 }, { "Item Name": "Red sangria", "SellingPrice": 225 }, { "Item Name": "White sangria", "SellingPrice": 247 }, { "Item Name": "Rose sangria", "SellingPrice": 247 }, { "Item Name": "By chance special ", "SellingPrice": 168 }, { "Item Name": "Made in heaven", "SellingPrice": 168 }, { "Item Name": "Strawberry delight", "SellingPrice": 168 }, { "Item Name": "DRAGON", "SellingPrice": 168 }, { "Item Name": "Mangochil ", "SellingPrice": 168 }, { "Item Name": "Cucumber cola", "SellingPrice": 168 }, { "Item Name": "Virgin mojito", "SellingPrice": 168 }, { "Item Name": "Virgin mary", "SellingPrice": 168 }, { "Item Name": "Virgin pinacolada", "SellingPrice": 168 }, { "Item Name": "CORONA", "SellingPrice": 438 }, { "Item Name": "CRAFT BEERS", "SellingPrice": 337 }, { "Item Name": "BIRA WHITE 330", "SellingPrice": 157 }, { "Item Name": "BIRA BLONDE 330", "SellingPrice": 135 }, { "Item Name": "BIRA STRONG 650", "SellingPrice": 213 }, { "Item Name": "KINGFISHER PREMIUM 330", "SellingPrice": 123 }, { "Item Name": "KINGFISHER PREMIUM 650", "SellingPrice": 202 }, { "Item Name": "KINGFISHER STRONG 330", "SellingPrice": 135 }, { "Item Name": "KINGFISHER STRONG 650", "SellingPrice": 213 }, { "Item Name": "KINGFISHER ULTRA 330", "SellingPrice": 146 }, { "Item Name": "KINGFISHER ULTRA 650", "SellingPrice": 281 }, { "Item Name": "KINGFISHER ULTRA MAX 330", "SellingPrice": 146 }, { "Item Name": "KINGFISHER ULTRA MAX 650", "SellingPrice": 281 }, { "Item Name": "BUDWIESER 330", "SellingPrice": 146 }, { "Item Name": "BUDWIESER 650", "SellingPrice": 270 }, { "Item Name": "BUDWIESER MAGNUM 330", "SellingPrice": 168 }, { "Item Name": "BUDWIESER MAGNUM 650", "SellingPrice": 281 }, { "Item Name": "TUBORG 330", "SellingPrice": 123 }, { "Item Name": "TUBORG 650", "SellingPrice": 191 }, { "Item Name": "TUBORG STRONG 330", "SellingPrice": 123 }, { "Item Name": "TUBORG STRONG 650", "SellingPrice": 213 }, { "Item Name": "CRANBERRY ", "SellingPrice": 157 }, { "Item Name": "ORANGE", "SellingPrice": 157 }, { "Item Name": "JAMICAN", "SellingPrice": 157 }, { "Item Name": "BLACK BERRY", "SellingPrice": 157 }, { "Item Name": "BLUE BERRY", "SellingPrice": 157 }, { "Item Name": "MOET CHANDON", "SellingPrice": 7875 }, { "Item Name": "SULA BRUT", "SellingPrice": 1687 }, { "Item Name": "MATEUS ROSE", "SellingPrice": 2137 }, { "Item Name": "HARDYS SIRAZ CABERNET 750", "SellingPrice": 1890 }, { "Item Name": "HARDYS SIRAZ CABERNET BY GLASS", "SellingPrice": 382 }, { "Item Name": "JACOB CREEK SIRAZ 750", "SellingPrice": 1800 }, { "Item Name": "JACOB CREEK SIRAZ BY GLASS", "SellingPrice": 360 }, { "Item Name": "BIG BANAYAN CHENNIN BLANC 750", "SellingPrice": 990 }, { "Item Name": "BIG BANAYAN CHENNIN BLANC BY GLASS", "SellingPrice": 202 }, { "Item Name": "SULA CHENIN BLANC 750 ", "SellingPrice": 1293 }, { "Item Name": "SULA CHENIN BLANC BY GLASS", "SellingPrice": 258 }, { "Item Name": "FOUR SEAZON CLASSIC CHENNIN BLANC 7", "SellingPrice": 1125 }, { "Item Name": "FOUR SEAZON CLASSIC CHENNIN BLANC B", "SellingPrice": 225 }, { "Item Name": "BIG BANAYAN CARBINET SAUVIGNON 750", "SellingPrice": 1125 }, { "Item Name": "BIG BANAYAN CARBINET SAUVIGNON BY G", "SellingPrice": 225 }, { "Item Name": "SULA SATORI MERLOT 750", "SellingPrice": 1237 }, { "Item Name": "SULA SATORI MERLOT BY GLASS", "SellingPrice": 247 }, { "Item Name": "GROVERS LA RESERVE 750", "SellingPrice": 1800 }, { "Item Name": "GROVERS LA RESERVE 100", "SellingPrice": 360 }, { "Item Name": "GLENFIDDICH 12 YEARS 700 ", "SellingPrice": 9225 }, { "Item Name": "GLENFIDDICH 12 YEARS 30", "SellingPrice": 405 }, { "Item Name": "TALISKER 750", "SellingPrice": 8775 }, { "Item Name": "TALISKER 30", "SellingPrice": 360 }, { "Item Name": "GLENNLIVET 750", "SellingPrice": 8887 }, { "Item Name": "GLENNLIVET 30", "SellingPrice": 360 }, { "Item Name": "THE SINGLETON 750", "SellingPrice": 7942 }, { "Item Name": "THE SINGLETON 30", "SellingPrice": 326 }, { "Item Name": "AMRUT FUSION 750", "SellingPrice": 5062 }, { "Item Name": "AMRUT FUSION 30", "SellingPrice": 202 }, { "Item Name": "JACK DANIELS 750", "SellingPrice": 7312 }, { "Item Name": "JACK DANIELS 30", "SellingPrice": 292 }, { "Item Name": "JIM BEAM WHITE 750", "SellingPrice": 4095 }, { "Item Name": "JIM BEAM WHITE 30", "SellingPrice": 168 }, { "Item Name": "JAMESON 750", "SellingPrice": 4950 }, { "Item Name": "JAMESON 30", "SellingPrice": 202 }, { "Item Name": "JW BLACK LABEL 750", "SellingPrice": 8212 }, { "Item Name": "JW BLACK LABEL 200", "SellingPrice": 2925 }, { "Item Name": "JW BLACK LABEL 30", "SellingPrice": 337 }, { "Item Name": "JW RED LABEL 200", "SellingPrice": 1158 }, { "Item Name": "BALLENTINSE FINEST BLENDED 750", "SellingPrice": 4545 }, { "Item Name": "BALLENTINSE FINEST BLENDED 30", "SellingPrice": 180 }, { "Item Name": "BLACK \& WHITE 375", "SellingPrice": 1575 }, { "Item Name": "BLACK \& WHITE 180", "SellingPrice": 787 }, { "Item Name": "BLACK \& WHITE 60", "SellingPrice": 258 }, { "Item Name": "BLACK \& WHITE 30", "SellingPrice": 135 }, { "Item Name": "100 PIPERS 180", "SellingPrice": 787 }, { "Item Name": "100 PIPERS 60", "SellingPrice": 258 }, { "Item Name": "100 PIPERS 30", "SellingPrice": 135 }, { "Item Name": "VAT 69 180", "SellingPrice": 675 }, { "Item Name": "VAT 69 60", "SellingPrice": 225 }, { "Item Name": "VAT 69 30", "SellingPrice": 112 }, { "Item Name": "TEACHERS HIGHLAND 180", "SellingPrice": 787 }, { "Item Name": "TEACHERS HIGHLAND 60", "SellingPrice": 258 }, { "Item Name": "TEACHERS HIGHLAND 30", "SellingPrice": 135 }, { "Item Name": "TEACHERS 50 60", "SellingPrice": 393 }, { "Item Name": "TEACHERS 50 30", "SellingPrice": 202 }, { "Item Name": "BLACK DOG TRIPPLE GOLD 180", "SellingPrice": 1215 }, { "Item Name": "BLACK DOG TRIPPLE GOLD 30", "SellingPrice": 213 }, { "Item Name": "BLACK DOG 8 YEARS 180", "SellingPrice": 731 }, { "Item Name": "BLACK DOG 8 YEARS 60", "SellingPrice": 247 }, { "Item Name": "BLACK DOG 8 YEARS 30", "SellingPrice": 123 }, { "Item Name": "BLENDERS PRIDE 750", "SellingPrice": 2283 }, { "Item Name": "BLENDERS PRIDE 375", "SellingPrice": 1147 }, { "Item Name": "BLENDERS PRIDE 180", "SellingPrice": 573 }, { "Item Name": "BLENDERS PRIDE 60", "SellingPrice": 191 }, { "Item Name": "BLENDERS PRIDE 30", "SellingPrice": 90 }, { "Item Name": "SIGNATURE 180", "SellingPrice": 450 }, { "Item Name": "SIGNATURE 60", "SellingPrice": 168 }, { "Item Name": "SIGNATURE 30", "SellingPrice": 90 }, { "Item Name": "GREY GOOSE 750", "SellingPrice": 8190 }, { "Item Name": "GREY GOOSE 30", "SellingPrice": 326 }, { "Item Name": "BELVEDERE 700", "SellingPrice": 8122 }, { "Item Name": "BELVEDERE 30", "SellingPrice": 360 }, { "Item Name": "CIROC 750", "SellingPrice": 7425 }, { "Item Name": "CIROC 30", "SellingPrice": 303 }, { "Item Name": "ABSOLUT 750", "SellingPrice": 4556 }, { "Item Name": "ABSOLUT 30", "SellingPrice": 191 }, { "Item Name": "SMIRNOFF RED 180", "SellingPrice": 551 }, { "Item Name": "SMIRNOFF RED 60", "SellingPrice": 202 }, { "Item Name": "SMIRNOFF RED30", "SellingPrice": 101 }, { "Item Name": "SMIRNOFF ORANGE 180", "SellingPrice": 551 }, { "Item Name": "SMIRNOFF ORANGE 60", "SellingPrice": 202 }, { "Item Name": "SMINOFF ORANGE30", "SellingPrice": 101 }, { "Item Name": "SMIRNOFF GREEN APPLE 180", "SellingPrice": 551 }, { "Item Name": "SMIRNOFF GREEN APPLE 60", "SellingPrice": 202 }, { "Item Name": "SMIRNOFF GREEN APPLE30", "SellingPrice": 101 }, { "Item Name": "BOMBAY SAPHIRE 750", "SellingPrice": 4725 }, { "Item Name": "BOMBAY SAPHIRE 30", "SellingPrice": 191 }, { "Item Name": "BLUE RIBBAND 750", "SellingPrice": 877 }, { "Item Name": "BLUE RIBBAND 60", "SellingPrice": 78 }, { "Item Name": "BACCARDI WHITE 750", "SellingPrice": 2418 }, { "Item Name": "BACCARDI WHITE 180", "SellingPrice": 585 }, { "Item Name": "BACCARDI WHITE 60", "SellingPrice": 202 }, { "Item Name": "BACCARDI WHITE 30", "SellingPrice": 101 }, { "Item Name": "BACCARDI LEMON 180", "SellingPrice": 585 }, { "Item Name": "BACCARDI LEMON 60", "SellingPrice": 202 }, { "Item Name": "BACCARDI LEMON 30", "SellingPrice": 101 }, { "Item Name": "BACCARDI ORANGE 180", "SellingPrice": 585 }, { "Item Name": "BACCARDI ORANGE 60", "SellingPrice": 202 }, { "Item Name": "BACCARDI LEMON 30", "SellingPrice": 101 }, { "Item Name": "BACCARDI BLACK 180", "SellingPrice": 393 }, { "Item Name": "BACCARDI BLACK 30", "SellingPrice": 67 }, { "Item Name": "BACCARDI GOLD 180", "SellingPrice": 585 }, { "Item Name": "BACCARDI GOLD30", "SellingPrice": 101 }, { "Item Name": "OLD MONK 180", "SellingPrice": 225 }, { "Item Name": "OLD MONK 90", "SellingPrice": 168 }, { "Item Name": "OLD MONK 60", "SellingPrice": 90 }, { "Item Name": "OLD MONK 30 ", "SellingPrice": 45 }, { "Item Name": "DON ANGEL 750", "SellingPrice": 4668 }, { "Item Name": "DON ANGEL 30", "SellingPrice": 191 }, { "Item Name": "SAUZA SILVER 700", "SellingPrice": 6153 }, { "Item Name": "SAUZA SILVER 30", "SellingPrice": 270 }, { "Item Name": "JAGERBOMB", "SellingPrice": 506 }, { "Item Name": "KAMAKAZI", "SellingPrice": 168 }, { "Item Name": "JAGERMASTER", "SellingPrice": 303 }, { "Item Name": "COINTTRAEU", "SellingPrice": 303 }, { "Item Name": "SAMBUCA", "SellingPrice": 258 }, { "Item Name": "KHALUA", "SellingPrice": 168 }, { "Item Name": "MARTINI BLANCO", "SellingPrice": 90 }, { "Item Name": "MARTINI ROSSO", "SellingPrice": 90 }, { "Item Name": "HENESSY VS 700", "SellingPrice": 7875 }, { "Item Name": "HENESSY VS 30", "SellingPrice": 348 }, { "Item Name": "MORPHEUS 750", "SellingPrice": 2182 }, { "Item Name": "MORPHEUS 180", "SellingPrice": 540 }, { "Item Name": "MORPHEUS 60", "SellingPrice": 191 }, { "Item Name": "MORPHEUS 30", "SellingPrice": 101 }, { "Item Name": "MANSION HOUSE 180", "SellingPrice": 292 }, { "Item Name": "MANSION HOUSE 90", "SellingPrice": 168 }, { "Item Name": "MANSION HOUSE 60", "SellingPrice": 90 }, { "Item Name": "MC BRANDY 60", "SellingPrice": 90 }, { "Item Name": "RED BULL ", "SellingPrice": 157 }, { "Item Name": "COKE", "SellingPrice": 45 }, { "Item Name": "SPRITE", "SellingPrice": 45 }, { "Item Name": "SODA", "SellingPrice": 33 }, { "Item Name": "DIET COKE", "SellingPrice": 56 }, { "Item Name": "TONIC WATER", "SellingPrice": 67 }, { "Item Name": "GINGER ALE", "SellingPrice": 67 }, { "Item Name": "LIME SODA", "SellingPrice": 45 }, { "Item Name": "LIME WATER", "SellingPrice": 45 }, { "Item Name": "PACKEGED WATER 1L", "SellingPrice": 39 }, { "Item Name": "MANSION HOUSE 650", "SellingPrice": 900 }, { "Item Name": "Chole Kulche", "SellingPrice": 80 }, { "Item Name": "Butter Nan", "SellingPrice": 65 }, { "Item Name": "Dhai", "SellingPrice": 20 }, { "Item Name": "Rice", "SellingPrice": 55 }, { "Item Name": "Plain rice", "SellingPrice": 30 }, { "Item Name": "MANSION HOUSE 650", "SellingPrice": 900 }, { "Item Name": "Chole Kulche", "SellingPrice": 80 }, { "Item Name": "Butter Nan", "SellingPrice": 65 }, { "Item Name": "Dhai", "SellingPrice": 20 }, { "Item Name": "Rice", "SellingPrice": 55 }, { "Item Name": "Plain rice", "SellingPrice": 30 }] myFun(); window.setInterval(showRows, 5000); showRows(); function myFun() { addTable(tableValue); } function showRows() { // Any TRs that are not hidden and not already shown get "already-shown" applied $("tr:not(.hidden):not(.already-shown)").addClass("already-shown"); // Then your previous code $(".hidden:lt(5)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five } function addTable(tableValue) { var $tbl = $("<table />", { "class": "table" }), $tb = $("<tbody/>"), $trh = $("<tr/>"); var split = Math.round(tableValue.length / 4); for (i = 0; i < split; i++) { $tr = $("<tr/>", { class: "hidden" }); //ading class for (j = 0; j < 4; j++) { $.each(tableValue[split * j + i], function(key, value) { $("<td/>", { "class": "text-left color" + (j + 1) }).html(value).appendTo($tr); }); } $tr.appendTo($tb); } $tbl.append($tb); $("#DisplayTable").html($tbl); } }); 

 tbody>tr>td { white-space: nowrap; border-collapse: collapse; font-family: Verdana; font-size: 1.1rem; font-weight: bold; white-space: nowrap; width: 100%; } td:nth-child(1), td:nth-child(3), td:nth-child(5), td:nth-child(7) { width: 50px; /*change*/ max-width: 50px; /*new add*/ } .color1 { background: #4AD184; } .color2 { background: #EA69EF; } .color3 { background: #E1A558; } .color4 { background: #F4F065; } /* added .already-shown to have the same properties as hidden */ .hidden, .already-shown { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <table class="table" id="DisplayTable"> </table> 

EDIT

I am trying to fix the column width of itemname while doing that the texts are over lapping

Answer 1

your css style have extra comma in td:child element

td:nth-child(1),
td:nth-child(3),,  <----- look here
td:nth-child(5),,  <----- look here
td:nth-child(7) {
  width: 10px;
}

Why not just set table column width base on td element. like this

td {
  width: 10px;
}

else you can try individual column width

td:nth-child(1),
td:nth-child(3),
td:nth-child(5),
td:nth-child(7) {
  width: 10px;
}

Answer 2

Why don't you add a width on the table in the css, like the following

table {
width: 100%;
}

Answer 3

you have added extra commas in td styles. see worked working

 $(document).ready(function() { var tableValue = [{ "Item Name": "MANCHOW V SOUP", "SellingPrice": 100 }, { "Item Name": "MANCHOW NV SOUP ", "SellingPrice": 125 }, { "Item Name": "CEASER SALAD V", "SellingPrice": 175 }, { "Item Name": "CEASER SALAD NV", "SellingPrice": 230 }, { "Item Name": "GAMBUS REBOZADAS", "SellingPrice": 350 }, { "Item Name": "PANCO FISH FINGER", "SellingPrice": 270 }, { "Item Name": "MUSHROOM DUPLEX", "SellingPrice": 160 }, { "Item Name": "FRENCH FRIES", "SellingPrice": 99 }, { "Item Name": "HONEY GARLIC PRAWN", "SellingPrice": 350 }, { "Item Name": "CHICKEN MANCHURIAN", "SellingPrice": 180 }, { "Item Name": "MUSHROOM CHILLY", "SellingPrice": 120 }, { "Item Name": "SALT N PEPPER BABY CORN", "SellingPrice": 120 }, { "Item Name": "SOUTHERN STYLE CHICKEN", "SellingPrice": 210 }, { "Item Name": "PANEER NAGGETS", "SellingPrice": 210 }, { "Item Name": "HARA BHARA KEBAB", "SellingPrice": 160 }, { "Item Name": "CHICKEN TIKKA", "SellingPrice": 210 }, { "Item Name": "KALMI KEBAB", "SellingPrice": 250 }, { "Item Name": "PIZZA MARGARITTA", "SellingPrice": 200 }, { "Item Name": "PIZZA VEG FARMHOUSE", "SellingPrice": 200 }, { "Item Name": "BBQ CHICKEN PIZZA", "SellingPrice": 225 }, { "Item Name": "CHICKEN TIKKA PIZZA", "SellingPrice": 225 }, { "Item Name": "PESTO SAUCE", "SellingPrice": 175 }, { "Item Name": "ARABIATA", "SellingPrice": 160 }, { "Item Name": "PINK SAUCE", "SellingPrice": 160 }, { "Item Name": "GARBANZO BEAN SALAD", "SellingPrice": 90 }, { "Item Name": "MASALA PAPAD", "SellingPrice": 50 }, { "Item Name": "PEANUT MASALA", "SellingPrice": 60 }, { "Item Name": "GAJAR KA HALWA", "SellingPrice": 90 }, { "Item Name": "WATERMELON MARTINI", "SellingPrice": 281.25 }, { "Item Name": "Kiwi martini", "SellingPrice": 281.25 }, { "Item Name": " Apple gin", "SellingPrice": 225 }, { "Item Name": "Cucumber cooler ", "SellingPrice": 281.25 }, { "Item Name": "Martini", "SellingPrice": 225 }, { "Item Name": "Pink lady", "SellingPrice": 225 }, { "Item Name": " Bloody marry", "SellingPrice": 281.25 }, { "Item Name": "Cosmopolitan", "SellingPrice": 281.25 }, { "Item Name": "Sex on the beach", "SellingPrice": 281.25 }, { "Item Name": "Bull frog", "SellingPrice": 506.25 }, { "Item Name": "Long island iced tea ", "SellingPrice": 393.75 }, { "Item Name": "Pinacolada", "SellingPrice": 225 }, { "Item Name": "Daiquiri", "SellingPrice": 225 }, { "Item Name": "Mojito ", "SellingPrice": 281.25 }, { "Item Name": "Whisky sour", "SellingPrice": 281.25 }, { "Item Name": "Hot toddy", "SellingPrice": 225 }, { "Item Name": "Margarita", "SellingPrice": 337.5 }, { "Item Name": "Tequila sunrise", "SellingPrice": 337.5 }, { "Item Name": "Red sangria", "SellingPrice": 225 }, { "Item Name": "White sangria", "SellingPrice": 247.5 }, { "Item Name": "Rose sangria", "SellingPrice": 247.5 }, { "Item Name": "By chance special ", "SellingPrice": 168.75 }, { "Item Name": "Made in heaven", "SellingPrice": 168.75 }, { "Item Name": "Strawberry delight", "SellingPrice": 168.75 }, { "Item Name": "DRAGON", "SellingPrice": 168.75 }, { "Item Name": "Mangochil ", "SellingPrice": 168.75 }, { "Item Name": "Cucumber cola", "SellingPrice": 168.75 }, { "Item Name": "Virgin mojito", "SellingPrice": 168.75 }, { "Item Name": "Virgin mary", "SellingPrice": 168.75 }, { "Item Name": "Virgin pinacolada", "SellingPrice": 168.75 }, { "Item Name": "CORONA", "SellingPrice": 438.75 }, { "Item Name": "CRAFT BEERS", "SellingPrice": 337.5 }, { "Item Name": "BIRA WHITE 330", "SellingPrice": 157.5 }, { "Item Name": "BIRA BLONDE 330", "SellingPrice": 135 }, { "Item Name": "BIRA STRONG 650", "SellingPrice": 213.75 }, { "Item Name": "KINGFISHER PREMIUM 330", "SellingPrice": 123.75 }, { "Item Name": "KINGFISHER PREMIUM 650", "SellingPrice": 202.5 }, { "Item Name": "KINGFISHER PREMIUM 330", "SellingPrice": 123.75 }, { "Item Name": "KINGFISHER PREMIUM 650", "SellingPrice": 202.5 }, { "Item Name": "TESTING ITEM", "SellingPrice": 22 } ] myFun(); window.setInterval(showRows, 5000); showRows(); function myFun() { addTable(tableValue); } function showRows() { // Any TRs that are not hidden and not already shown get "already-shown" applied $("tr:not(.hidden):not(.already-shown)").addClass("already-shown"); // Then your previous code $(".hidden:lt(5)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five } function addTable(tableValue) { var $tbl = $("<table />", { "class": "table" }), $tb = $("<tbody/>"), $trh = $("<tr/>"); var split = Math.round(tableValue.length / 4); for (i = 0; i < split; i++) { $tr = $("<tr/>", { class: "hidden" }); //ading class for (j = 0; j < 4; j++) { $.each(tableValue[split * j + i], function(key, value) { $("<td/>", { "class": "text-left color" + (j + 1) }).html(value).appendTo($tr); }); } $tr.appendTo($tb); } $tbl.append($tb); $("#DisplayTable").html($tbl); } }); 

 tbody>tr>td { white-space: nowrap; border-collapse: collapse; font-family: Verdana; font-size: 1.1rem; font-weight: bold; white-space: nowrap; width: 100%; } td:nth-child(1), td:nth-child(3), td:nth-child(5), td:nth-child(7) { width: 10px; } .color1 { background: #4AD184; } .color2 { background: #EA69EF; } .color3 { background: #E1A558; } .color4 { background: #F4F065; } /* added .already-shown to have the same properties as hidden */ .hidden, .already-shown { display: none; } 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <table class="table" id="DisplayTable"> </table> 

Answer 4

if i am not wrong, you should need to give "max-width" also in td. then its working perfect.

td:nth-child(1), td:nth-child(3), td:nth-child(5), td:nth-child(7) { width: 10px; max-width: 10px; }

Answer 5

 $(document).ready(function() { var tableValue = [{ "Item Name": "MANCHOW V SOUP", "SellingPrice": 100 }, { "Item Name": "MANCHOW NV SOUP ", "SellingPrice": 125 }, { "Item Name": "CEASER SALAD V", "SellingPrice": 175 }, { "Item Name": "CEASER SALAD NV", "SellingPrice": 230 }, { "Item Name": "GAMBUS REBOZADAS", "SellingPrice": 350 }, { "Item Name": "PANCO FISH FINGER", "SellingPrice": 270 }, { "Item Name": "MUSHROOM DUPLEX", "SellingPrice": 160 }, { "Item Name": "FRENCH FRIES", "SellingPrice": 99 }, { "Item Name": "HONEY GARLIC PRAWN", "SellingPrice": 350 }, { "Item Name": "CHICKEN MANCHURIAN", "SellingPrice": 180 }, { "Item Name": "MUSHROOM CHILLY", "SellingPrice": 120 }, { "Item Name": "SALT N PEPPER BABY CORN", "SellingPrice": 120 }, { "Item Name": "SOUTHERN STYLE CHICKEN", "SellingPrice": 210 }, { "Item Name": "PANEER NAGGETS", "SellingPrice": 210 }, { "Item Name": "HARA BHARA KEBAB", "SellingPrice": 160 }, { "Item Name": "CHICKEN TIKKA", "SellingPrice": 210 }, { "Item Name": "KALMI KEBAB", "SellingPrice": 250 }, { "Item Name": "PIZZA MARGARITTA", "SellingPrice": 200 }, { "Item Name": "PIZZA VEG FARMHOUSE", "SellingPrice": 200 }, { "Item Name": "BBQ CHICKEN PIZZA", "SellingPrice": 225 }, { "Item Name": "CHICKEN TIKKA PIZZA", "SellingPrice": 225 }, { "Item Name": "PESTO SAUCE", "SellingPrice": 175 }, { "Item Name": "ARABIATA", "SellingPrice": 160 }, { "Item Name": "PINK SAUCE", "SellingPrice": 160 }, { "Item Name": "GARBANZO BEAN SALAD", "SellingPrice": 90 }, { "Item Name": "MASALA PAPAD", "SellingPrice": 50 }, { "Item Name": "PEANUT MASALA", "SellingPrice": 60 }, { "Item Name": "GAJAR KA HALWA", "SellingPrice": 90 }, { "Item Name": "WATERMELON MARTINI", "SellingPrice": 281.25 }, { "Item Name": "Kiwi martini", "SellingPrice": 281.25 }, { "Item Name": " Apple gin", "SellingPrice": 225 }, { "Item Name": "Cucumber cooler ", "SellingPrice": 281.25 }, { "Item Name": "Martini", "SellingPrice": 225 }, { "Item Name": "Pink lady", "SellingPrice": 225 }, { "Item Name": " Bloody marry", "SellingPrice": 281.25 }, { "Item Name": "Cosmopolitan", "SellingPrice": 281.25 }, { "Item Name": "Sex on the beach", "SellingPrice": 281.25 }, { "Item Name": "Bull frog", "SellingPrice": 506.25 }, { "Item Name": "Long island iced tea ", "SellingPrice": 393.75 }, { "Item Name": "Pinacolada", "SellingPrice": 225 }, { "Item Name": "Daiquiri", "SellingPrice": 225 }, { "Item Name": "Mojito ", "SellingPrice": 281.25 }, { "Item Name": "Whisky sour", "SellingPrice": 281.25 }, { "Item Name": "Hot toddy", "SellingPrice": 225 }, { "Item Name": "Margarita", "SellingPrice": 337.5 }, { "Item Name": "Tequila sunrise", "SellingPrice": 337.5 }, { "Item Name": "Red sangria", "SellingPrice": 225 }, { "Item Name": "White sangria", "SellingPrice": 247.5 }, { "Item Name": "Rose sangria", "SellingPrice": 247.5 }, { "Item Name": "By chance special ", "SellingPrice": 168.75 }, { "Item Name": "Made in heaven", "SellingPrice": 168.75 }, { "Item Name": "Strawberry delight", "SellingPrice": 168.75 }, { "Item Name": "DRAGON", "SellingPrice": 168.75 }, { "Item Name": "Mangochil ", "SellingPrice": 168.75 }, { "Item Name": "Cucumber cola", "SellingPrice": 168.75 }, { "Item Name": "Virgin mojito", "SellingPrice": 168.75 }, { "Item Name": "Virgin mary", "SellingPrice": 168.75 }, { "Item Name": "Virgin pinacolada", "SellingPrice": 168.75 }, { "Item Name": "CORONA", "SellingPrice": 438.75 }, { "Item Name": "CRAFT BEERS", "SellingPrice": 337.5 }, { "Item Name": "BIRA WHITE 330", "SellingPrice": 157.5 }, { "Item Name": "BIRA BLONDE 330", "SellingPrice": 135 }, { "Item Name": "BIRA STRONG 650", "SellingPrice": 213.75 }, { "Item Name": "KINGFISHER PREMIUM 330", "SellingPrice": 123.75 }, { "Item Name": "KINGFISHER PREMIUM 650", "SellingPrice": 202.5 }, { "Item Name": "KINGFISHER PREMIUM 330", "SellingPrice": 123.75 }, { "Item Name": "KINGFISHER PREMIUM 650", "SellingPrice": 202.5 }, { "Item Name": "TESTING ITEM", "SellingPrice": 22 } ] myFun(); window.setInterval(showRows, 5000); showRows(); function myFun() { addTable(tableValue); } function showRows() { // Any TRs that are not hidden and not already shown get "already-shown" applied $("tr:not(.hidden):not(.already-shown)").addClass("already-shown"); // Then your previous code $(".hidden:lt(5)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five } function addTable(tableValue) { var $tbl = $("<table />", { "class": "table" }), $tb = $("<tbody/>"), $trh = $("<tr/>"); var split = Math.round(tableValue.length / 4); for (i = 0; i < split; i++) { $tr = $("<tr/>", { class: "hidden" }); //ading class for (j = 0; j < 4; j++) { $.each(tableValue[split * j + i], function(key, value) { $("<td/>", { "class": "text-left color" + (j + 1) }).html(value).appendTo($tr); }); } $tr.appendTo($tb); } $tbl.append($tb); $("#DisplayTable").html($tbl); } }); 

 tbody>tr>td { white-space: nowrap; border-collapse: collapse; font-family: Verdana; font-size: 1.1rem; font-weight: bold; white-space: nowrap; /* width: 100%;*/ /*remove this style*/ } td:nth-child(2), td:nth-child(4), td:nth-child(6), td:nth-child(8) { width: 100px; /*change*/ max-width: 100px; /*new add*/ } .color1 { background: #4AD184; } .color2 { background: #EA69EF; } .color3 { background: #E1A558; } .color4 { background: #F4F065; } /* added .already-shown to have the same properties as hidden */ .hidden, .already-shown { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <table class="table" id="DisplayTable"> </table>