我创建了一个包含 JSON 数据的 HTML 表格，我将其分为四列以显示在显示屏上，一次显示 5 行，然后在 5 秒后显示下五行，这就是我的表格的工作方式
现在我必须在分辨率为 1336*768 的显示屏上显示该表格，因此我试图提供完整的内容，以便它适合屏幕而无需任何滚动
由于某些原因，我也想为我的列提供宽度，但这也没有占用宽度，我不知道我做错了什么即将到来 
代码
$(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>编辑
我正在尝试修复 itemname 的列宽，同时文本重叠
最佳答案
为什么不在css中给表格加个宽度，像下面这样
table {
width: 100%;
}
关于javascript - 如何为 HTML 表格和列指定特定宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56354053/