>source

HTML 테이블 작업을하고 있는데 아주 오랫동안 여기에 붙어 있습니다. 테이블을 4 개의 열/그리드로 표시해야합니다.

이제 테이블을 렌더링 할 때 5 초 후 다음 17보다 한 행에 처음 17 행을 표시합니다

문제가 무엇인가요

  • 일부 ItemNames   BIG BANAYAN CARBINET SAUVIGNON BY GLASS 와 같은 큰
  • 따라서 5 초 후에 페이지를 새로 고치면이 긴 이름이 포함 된 열의 너비가 매우 커져 UI에서보기에 좋지 않습니다
  • 각 열의 너비를 4 개로 균일하게 만들려고합니다.
  • 따라서 긴 ITEM NAME이 나올 때 word-wrap: normal; 를 사용하는 것입니다.  약간의 폭으로 끊어도 작동하지 않습니다.
  • 4 개의 열을 같은 부분으로 나누고 있는데, 화면을 4 개의 부분으로 나누어야하는 테이블을 렌더링하는 화면입니다. 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>


  • 답변 # 1

    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);
            }
    
    

  • 답변 # 2

    for 루프를 사용하여 4 행으로 데이터를 가져옵니다. 부트 스트랩 class="col-sm-3" 를 사용해야한다고 제안합니다.  html 파일 테이블 태그에. 이렇게하면 문자열이 길이만큼 줄 바꿈되고 동일한 공간을 가진 4 개의 행이 표시됩니다. 가져 오기

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    
    

  • 답변 # 3

    flexbox를 사용하여 테이블 구조를 단순화하십시오. 이 바이올린을보세요

    JS로부터 HTML 구조를 랜더링 :

    <div class="item already-show">
     <div class="col">
       <span>BIG BANAYAN CHENNIN BLANC BY GLASS</span><span>438</span>
     </div>
     <div class="col">
        <span>JAMESON 750</span><span>4950</span>
     </div>
     <div class="col">
        <span>BACCARDI WHITE 60</span><span>202</span>
     </div>
     <div class="col">
        <span>Plain rice</span><span>30</span>
     </div>
    </div>
    
    

    CSS :

    .item {
      display: flex;
      width:100%
    }
    .col {
      display: flex;
      padding: .75rem;
      vertical-align: top;
      border: 1px solid #dee2e6;
      width: 100%;
      align-items: center;
      justify-content: space-between;
    }
    
    

  • 이전 angularjs - UI-Grid에서 텍스트 상자 값을 가져옵니다
  • 다음 facebook - Gitub 소셜 미디어 이미지가 업데이트시 갱신되지 않습니다