使用 materialize css 中的响应式 table 功能调整小屏幕上的 td 宽度

Question

我目前正在使用 ajax 动态创建包含营养数据的 table。我在 Materialize.css 中使用响应式 table 功能来允许较小屏幕上的 table 数据水平滚动。我希望响应 table 中的最大宽度为 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;
}

"white-space: nowrap"是你的问题。您可以在 tr/td:

上覆盖它

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

使用 materialize css 中的响应式 table 功能调整小屏幕上的 td 宽度

Adjusting td width on small screens using responsive table feature in materialize css

html

javascript

css

jquery

materialize