使用materialize css中的響應表功能在小屏幕上調整td寬度

Question

我目前正在使用 ajax 動態創建一個包含營養數據的表。 我使用 Materialize.css 中的響應式表格功能來允許較小屏幕上的表格數據水平滾動。 我希望響應表中的最大寬度為300px ，如我的 CSS 所示。

但是，當我將屏幕縮小到較小的尺寸 ( ~400px ) 時，每個 td 中的文本不會中斷並與其他列重疊，如下所示：

如何在較小的屏幕上保持列寬 ( 400px )，同時防止文本重疊？ 提前致謝！

我為我的項目提供了一個Codepen

HTML：

<div class="row valign-wrapper">
  <div class="input-field col s3 valign">
    <input id="food" type="text" class="validate" />
    <label for="food">Keyword</label>
  </div>
  <div class="col s2 valign">
    <a class="waves-effect waves-light btn cyan food-search">Search</a>
  </div>
</div>

<div class="row">
  <table>
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>


<!-- Modal Structure -->
<div id="nutrition-facts" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4>Nutrition Facts</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>

CSS：

body {
  background: #f9f4ed;
}

h1 {
 color: white;
}

tr td {
  max-width: 300px;
}

jQuery：

var apiKey = "rHkKtH6RMPiYlFkjl3jBGWpfcEJB3ZMqkyZmAxHK";

$(document).ready(function() {

  $(".food-search").on("click", function(e) {

    var search = $("input:text").val();

    e.preventDefault();

    $("thead").empty();
    $("tbody").empty();

    $.ajax({
      type: "GET",
      url: "http://api.nal.usda.gov/ndb/search/?format=json&q=" + search + "&sort=r&max=25&offset=0&api_key=" + apiKey,
      success: function(data) {
      var foodList = buildTable(data);
     },
      error: function(jqXHR, textstatus, errorThrown) {
        console.log(jqXHR);
        console.log(textstatus);
        console.log(errorThrown);
      }

    });

  });

  function buildTable(foodData) {
    var itemList = foodData.list.item;
    var foodGroup, foodName, newDiv, createButton, ndbNumber, createTable, tableHead, categoryHeading, nameHeading, tr;
    $("table").addClass("bordered centered responsive-table");
    categoryHeading = $("<th>").html("Category");
    nameHeading = $("<th>").html("Name");
    $("thead").append(categoryHeading).append(nameHeading);
    for (var i = 0; i < itemList.length; i++) {
      foodGroup = $("<td>").html(itemList[i].group);
      foodName = $("<td>").html(itemList[i].name);
      ndbNumber = itemList[i].ndbno;
      newDiv = $("<td>");
      createButton = $("<a>")
      .addClass("waves-effect waves-light btn cyan nutrition modal-trigger")
      .attr("href", "#nutrition-facts")
      .html("Nutrition Facts")
      .attr('data-ndbnum', ndbNumber);
      addButton = newDiv.append(createButton);
      tr = $("<tr>").append(foodGroup).append(foodName).append(addButton);
     $("tbody").append(tr);
   }
 }

  $(document).on('click', '.nutrition', function(e) {
    e.preventDefault();
    var ndbNumber = $(this).attr('data-ndbnum');
    $(".modal-trigger").leanModal();
  });

});

Answer 1

您的 materialize.min.css 添加此媒體查詢：

@media only screen and (max-width: 992px)
table.responsive-table tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
}

“空白：nowrap”是你的問題。 您可以在 tr/td 上覆蓋它：

tr td {
  max-width: 300px;
  white-space:normal;
}