我正在处理HTML表，并且在这里呆了很长时间，我需要将表显示为四列/网格，这已经完成了
现在，当我渲染表格时，我一次显示的前17行比五秒钟后的下17行显示
有什么问题
有些ItemNames很大，像BIG BANAYAN CARBINET SAUVIGNON BY GLASS
因此，当页面在五秒钟后刷新时，包含此长名称的列的宽度变得非常大，在UI上看起来不太好
我正在尝试使每一列的宽度均匀，所有四个将具有相同的宽度
因此，当长长的ITEM NAME出现时，我想做的就是使用word-wrap: normal;在一定宽度后将其断开，但它不起作用
我将四列划分为相等的部分，无论在哪个屏幕上呈现表格，都应将其划分为四个部分，当ITEMNAME较大时，我想将其显示在同一行中，但是在换行之后超过列的宽度
我认为我必须给所有行某种高度，当它可以接受一个小项目名称时，它将显示在单行中，但是当名称较大时，它应该显示在同一行中，但以相同的字体显示在两行中
$(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(15)").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: normal;
border-collapse: collapse;
font-family: Verdana;
font-weight: bold;
white-space: nowrap;
}
td {
word-break: break-all;
}
.color1 {
background: #4AD184;
}
.color2 {
background: #EA69EF;
}
.color3 {
background: #E1A558;
}
.color4 {
background: #F4F065;
}
.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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<table class="table" id="DisplayTable">
</table>最佳答案
您的CSS CDN链接错误。没有这样的文件。请替换为以下CDN链接。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
然后，您在另一个表中渲染表，这是错误的做法。
请用下面的html替换
<div class="container-fluid">
<div class="row">
<div class="col-12" id="DisplayTable">
</div>
</div>
</div>
再添加一个CSS
.fixed {
table-layout: fixed;
}
然后将CSS类添加到脚本中
function addTable(tableValue) {
var $tbl = $("<table />", {
"class": "table fixed"
}),
$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);
}