Question

我创建了一个包含JSON数据的HTML表，将其分为四列以显示在显示屏上，然后一次显示5行，然后在5秒后显示下5行，这就是我的表的工作方式

现在，我必须在分辨率为1336*768的显示屏上显示该表，因此soi正在尝试提供完整的内容，以便它可以在屏幕上显示而无需任何滚动

由于某些原因，我也想给列设置宽度，但是那也没有占用宽度，我不知道我做错了什么

代码

$(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 \u0026 WHITE 375",
    "SellingPrice": 1575
  }, {
    "Item Name": "BLACK \u0026 WHITE 180",
    "SellingPrice": 787
  }, {
    "Item Name": "BLACK \u0026 WHITE 60",
    "SellingPrice": 258
  }, {
    "Item Name": "BLACK \u0026 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>

编辑

我正在尝试修复文本重叠的项目名称的列宽

Answer 1

您的CSS样式在td：child元素中有多余的逗号

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

为什么不仅仅基于td元素设置表的列宽。像这样

td {
  width: 10px;
}

否则，您可以尝试设置各个列的宽度

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

Answer 2

为什么不在CSS的表格上添加宽度，如下所示？

table {
width: 100%;
}

Answer 3

您已在td样式中添加了多余的逗号。看到工作正常

$(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

如果我没记错的话，您还应该在td中输入“最大宽度”。那么它的工作就完美了。

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>

如何给HTML表格和列指定宽度

5 个答案: